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

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 dc6dce4a544fdca2df29d5ac0ea9906b-Elemente:

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

Für das erste >div<-Element machen wir es standardmäßig ziehbar.
$('#dd1').draggable();
Für das zweite dc6dce4a544fdca2df29d5ac0ea9906b-Element machen wir es ziehbar, indem wir einen Proxy erstellen, der das ursprüngliche Element klont.

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

Für das dritte dc6dce4a544fdca2df29d5ac0ea9906b-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;
 }
});

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 e60d1b54bf999ac9e3299a277954b392-Element und die Stundenplanzelle ist ein 4aa9d01e03735a4fb2ceea8133ac1fc2

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>

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>

Schulfächer nach links ziehen

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

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
  });
 }
 }
});

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.