Erlernen Sie ganz einfach das jQuery-Plug-in EasyUI. EasyUI implementiert grundlegende Drag-Operationen

Dieses Tutorial zeigt Ihnen, wie Sie HTML-Elemente ziehbar machen. In diesem Fall erstellen wir drei DIV-Elemente und aktivieren dann deren Ziehen und Platzierung.

Zuerst erstellen wir drei

-Elemente:

<div id="dd1" class="dd-demo"></div>
<div id="dd2" class="dd-demo"></div>
<div id="dd3" class="dd-demo"></div>

Nach dem Login kopieren

Für das erste >div<-Element machen wir es standardmäßig ziehbar.
$('#dd1').draggable();
Für das zweite

-Element machen wir es ziehbar, indem wir einen Proxy erstellen, der das ursprüngliche Element klont.

$('#dd2').draggable({
 proxy:'clone'
});

Nach dem Login kopieren

Für das dritte

-Element machen wir es ziehbar, indem wir einen benutzerdefinierten Proxy erstellen.

$('#dd3').draggable({
 proxy:function(source){
 var p = $('<div class="proxy">proxy</div>');
 p.appendTo('body');
 return p;
 }
});

Nach dem Login kopieren

Das Folgende ist ein einfaches Beispiel des Schullehrplans, den jeder gerne lernen kann:

Wir werden zwei Tabellen erstellen: eine mit den Schulfächern auf der linken und die Stundenpläne auf der rechten Seite. Sie können Schulfächer per Drag-and-Drop in Stundenplanzellen ziehen. Das Schulfach ist ein

-Element und die Stundenplanzelle ist ein

Schulfächer anzeigen

<div class="left">
 <table>
 <tr>
  <td><div class="item">English</div></td>
 </tr>
 <tr>
  <td><div class="item">Science</div></td>
 </tr>
 <!-- other subjects -->
 </table>
</div>

Nach dem Login kopieren

Zeitplan anzeigen

<div class="right">
 <table>
 <tr>
  <td class="blank"></td>
  <td class="title">Monday</td>
  <td class="title">Tuesday</td>
  <td class="title">Wednesday</td>
  <td class="title">Thursday</td>
  <td class="title">Friday</td>
 </tr>
 <tr>
  <td class="time">08:00</td>
  <td class="drop"></td>
  <td class="drop"></td>
  <td class="drop"></td>
  <td class="drop"></td>
  <td class="drop"></td>
 </tr>
 <!-- other cells -->
 </table>
</div>

Nach dem Login kopieren

Schulfächer nach links ziehen

$('.left .item').draggable({
 revert:true,
 proxy:'clone'
});

Nach dem Login kopieren

Platzieren Sie Schulfächer auf Stundenplanzellen

$('.right td.drop').droppable({
 onDragEnter:function(){
 $(this).addClass('over');
 },
 onDragLeave:function(){
 $(this).removeClass('over');
 },
 onDrop:function(e,source){
 $(this).removeClass('over');
 if ($(source).hasClass('assigned')){
  $(this).append(source);
 } else {
  var c = $(source).clone().addClass('assigned');
  $(this).empty().append(c);
  c.draggable({
  revert:true
  });
 }
 }
});

Nach dem Login kopieren

Wie Sie im obigen Code sehen können, wird die onDrop-Rückruffunktion aufgerufen, wenn der Benutzer das Schulfach auf der linken Seite zieht und in der Stundenplanzelle ablegt. Wir klonen das von links gezogene Quellelement und hängen es an die Zeitplanzelle an. Wenn Sie ein Schulfach von einer Zelle des Stundenplans in eine andere ziehen, verschieben Sie es einfach.

Das Obige soll Ihnen zeigen, wie Sie mit jQuery EasyUI einen Schullehrplan erstellen. Ich hoffe, es wird Ihnen gefallen und Sie werden dem nächsten Artikel des Herausgebers weiterhin Aufmerksamkeit schenken.

Verwandte Etiketten：

easyui jquery 拖动课程表

Quelle：php.cn

Vorheriger Artikel：Zusammenfassung der Ausnahmebehandlungsbeispiele in der Javascript-Programmierung_Javascript-Kenntnisse Nächster Artikel：Bootstrap-JS-Plug-in, das Sie jeden Tag erlernen müssen_Javascript-Kenntnisse

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors