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

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

elements:

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

Copy after login

For the first >div< element, we make it draggable by default.
$('#dd1').draggable();
For the second

element, we make it draggable by creating a proxy that clones the original element.

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

Copy after login

For the third

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

Copy after login

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

element, and the timetable cell is a 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>

Copy after login

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>

Copy after login

Drag school subjects on the left

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

Copy after login

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

Copy after login

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.

Related labels：

easyui jquery drag Class Schedule

source：php.cn

Previous article：Summary of exception handling examples in javascript programming_javascript skills Next article：Bootstrap js plug-in that you must learn every day_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

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