Easyui drag-and-drop function explanation and the implementation of multi-selection and drag-dragging

First, we consider a business scenario in which a maintenance department is divided into N service groups, and the maintenance personnel of the service department need to assign the maintenance staff in the department to these groups.

Of course, he can select a maintenance staff, and then assign him a maintenance team, but from a human perspective, if the use of drag and drop is more rapid and clear?

For example, we can list the repair team and maintenance personnel, and then simply drag the service personnel to the corresponding group to complete the grouping.

In addition, because of a drag or too cumbersome, but also need to implement the selection of multiple maintenance personnel grouped together. So we step by step, the first implementation of a single drag function, and then join the multi-select drag Support ~

Single-Select drag

First, simply design a layout based on the scenario we just described:

Next, what we need to do is:

1, let the maintenance personnel corresponding to the small square can be dragged up

This requires each small box to be registered as draggable (here I added class= ' employee ' for each small square)

$ ('. Employee '). Draggable ({revert:true,proxy: ' Clone ', Onstartdrag:function () {$ (this). draggable (' options '). cursor = ' not-allowed '; $ (this). Draggable (' proxy '). CSS (' Z-index ', ten); $ (this). Draggable (' proxy '). addclass (' DP ')}, Onstopdrag:function () {$ (this). draggable (' options '). cursor = ' move ';}});

About the property settings in Draggable, here is also explained:

Revert:true indicates that the small square returns to its original position when the drag is stopped (false does not return)

Proxy: ' clone ' means that the dragged element, if set to clone, then it will automatically help you clone an element for you to drag, if you want to write your own, the return must be a jquery object. This is discussed in the implementation of the multi-select drag in the back.

Onstartdrag starts to drag, you can see here we set some visual effects, such as adding an irresistible small corner mark, and the opacity is lower (. dp)

Onstopdrag trigger on end of drag, restore corner label

2, let the small square can be placed in the above group, and show out

Then first you need to register the above group as droppable (this is the last layer of UL added for the group. Group-list Convenient Choice)

$ ('. Group-list li '). Droppable ({//Note that the use of Li in this case cannot be used directly. Easyui-datagridondragenter:function (e, source) {$ (source). Draggable (' options '). cursor = ' auto ';},ondragleave:function (e, source) {$ (source). draggable (' options '). Cursor = ' Not-allowed ';},ondrop:function (e, source) {var empno = $ (source). Find (' p:eq (0) '). html (); var name = $ (source). Find (' P: EQ (1) '). html (); var phone = $ (source). Find (' P:eq (2) '). html (); AddEmployee (Empno.split (': ') [1], Name.split (': ') [1], Phone.split (': ') [1], $ (this). Find (' [Id^=group] '); $ (source). Parent (). hide ();});

Here are some of the events are better understood, look at the name can be

OnDragEnter: Triggered when a dragged small block enters

OnDragLeave: Triggered when a dragged small square is left

OnDrop: Triggers when a dragged small block enters and releases the mouse

Of course, OnDrop is obviously the most important, after releasing the mouse we need to add a small square of maintenance personnel to the corresponding group, that is, AddEmployee (...) This function

function AddEmployee (empno, name, Phone, DG) {var data = Dg.datagrid (' getData '); function add () {data.total + = 1;data.rows. Push ({empno:empno,name:name,phone:phone});} Add ();d g.datagrid (' LoadData ', data);}

The DG here is found by dragging the released group through the small squares, which is the Ondrap function (this). Find (' [Id^=group] '). Here's a little trick, which is to name the group's ID to start with a group, followed by a number of groups, mainly because Easyui support for non-ID access elements is not very good.

At this point, the single-drag-and-drop is finished, you can try to drag the small square to the repair team to try ~

Multi-Select drag

The following starts to explain the multi-select drag, the difficulty of multi-select drag is, how to choose? The perfect way, of course, is to click on the small squares and then drag them together into the repair group.

However, clicking on a small square will also be considered a drag to trigger Ondrapstart, and does not trigger the onclick event.

Can I add a multi box (checkbox) to a small square without triggering a drag event?

I found that because I would clone a small square and overwrite it on the previous small square when I was dragging it, I basically couldn't get to the original small square (Quick Click would be successful, but obviously it would not work).

And when I did this, I used a method that took advantage of the draggable's DeltaX and DeltaY two properties, which mean the position of a small square of clone, relative to the original small square.

This way, you can choose more if you avoid masking to the checkbox! But because the click will jump, here is not recommended, interested friends can try.

Another way, is to drag the small square and the multi-box to separate, so that it will not be obscured (why did not think), the following directly on the code, we can compare with the previous radio to see

$ ('. Employee '). Draggable ({revert:true,proxy:function (source) {if ($ (": checkbox:checked"). Length = = 0) {var clone = $ ( SOURCE). Clone (); Clone.insertbefore (source); return clone;} Else{var div = $ ("<div/>"); $ (": checkbox:checked"). each (function () {var clone = $ (this). Prev (). Clone (); Div.append (clone);}); Div.insertbefore ($ (source)); return Div;}},onstartdrag:function () {$ (this). draggable (' options '). Cursor = ' Not-allowed '; $ (this). Draggable (' proxy '). CSS (' Z-index ', ten); $ (this). Draggable (' proxy '). addclass (' DP ')}, Onstopdrag:function () {$ (this). draggable (' options '). cursor = ' move ';}});

I'm going to check the checkbox for multiple selected and not selected checkbox to separate the two cases, the only difference here is the Proxy property

About this proxy is actually in the interface clone a proxy small box out, used to drag the display, then for multi-Select, we first need to clone the selected small box, and then plug the Small block into the interface, and then need to return these small blocks to the proxy. Another problem here is that I have tried many times to return only the JQuery object and not the jquery array. So we can only make a div and then put the selected small squares into this div, and finally there will be a drag along the effect, of course, this is purely for the effect of good, with the previous proxy: ' Clone ' can also achieve the purpose of multi-select drag, Only the last drag of the small square will appear on the display during the drag process.

$ ('. Group-list li '). Droppable ({//Note that the use of Li in this case cannot be used directly. Easyui-datagridondragenter:function (e, source) {$ (source). Draggable (' options '). cursor = ' auto ';},ondragleave:function (e, source) {$ (source). draggable (' options '). Cursor = ' Not-allowed ';},ondrop:function (e, source) {if ($ (": checkbox:checked"). Length = = 0) {var empno = $ (source). Find (' P:eq (0) '). html (), var name = $ (source). Find (' P:eq (1) '). html (); var phone = $ (source). Find (' P:eq (2) '). html (); AddEmployee ( Empno.split (': ') [1], Name.split (': ') [1],phone.split (': ') [1], $ (this). Find (' [Id^=group] '); $ (source). Parent (). Hide ();} Else{var Li = $ (this);//prevents each access to Thisvar group = Li.find (' [Id^=group] '); $ (": checkbox:checked"). each (function () {var Empno = $ (this). Prev (). Find (' p:eq (0) '). html (), var name = $ (this). Prev (). Find (' P:eq (1) '). html (), var phone = $ (this). Prev (). Find (' P:eq (2) '). html (); AddEmployee (Empno.split (': ') [1], Name.split (': ') [1],phone.split (': ') [1], group); $ ( This). Parent (). Hide (), $ (this). Removeattr ("checked");});}});

For the drag to the repair group after the release of the mouse processing also should be discussed separately, this is also better understanding ~

Then write it here ~ Come home from work!

Easyui drag-and-drop function explanation and the implementation of multi-selection and drag-dragging