Easily learn the jQuery plug-in EasyUI EasyUI implements basic drag operations_jquery

This tutorial shows you how to make HTML elements draggable, in this case we will create three DIV elements and then enable their dragging and placement.

First, we create three dc6dce4a544fdca2df29d5ac0ea9906b elements:

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

For the first >div< element, we make it draggable by default.
$('#dd1').draggable();
For the second dc6dce4a544fdca2df29d5ac0ea9906b element, we make it draggable by creating a proxy that clones the original element.

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

For the third dc6dce4a544fdca2df29d5ac0ea9906b element, we make it draggable by creating a custom proxy.

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

The following is a simple example of the school curriculum, everyone is welcome to learn:

We will create two tables: one showing school subjects on the left and timetables on the right. You can drag and drop school subjects onto timetable cells. The school subject is a e60d1b54bf999ac9e3299a277954b392 element, and the timetable cell is a 4aa9d01e03735a4fb2ceea8133ac1fc2 element.

Show school subjects

<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>

Show schedule

<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>

Drag school subjects on the left

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

Place school subjects on timetable cells

$('.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
  });
 }
 }
});

As you can see in the above code, when the user drags the school subject on the left and drops it into the timetable cell, the onDrop callback function will be called. We clone the source element dragged from the left and attach it to the schedule cell. When dragging a school subject from one cell of the timetable to another, simply move it.

The above is to show you how to use jQuery EasyUI to create a school curriculum. I hope it will be helpful to your study. You will like it and continue to pay attention to the editor's next article.