How to Use jQuery Draggable and Droppable to implement the drag Function

In previous articles, I have introduced the basic drag-and-drop principle in web development, and now provide the functions to be completed. Final Running Effect As shown in:

Description of main function requirements:
1. The element structure on the left is finally generated through the Ajax call server data and supports multi-level elements. The parent node can be folded.

2. You can drag and drop elements from the left to the right through the drag and drop operation. If the parent node element is dragged, You need to drag its child node elements to the right.

3. Put the element on the right. There are two possibilities for accepting the element area on the right. Create a region, as shown in "China East Jiaotong University. Drag and Drop an existing element to an area. The relationship between the two is "or ". A single element area has a "Non" and "and" relationship. Click the delete button on the right to delete the node element.

Step 1: drag the element on the left
The official example is to add class = "ui-widget-content" directly on the element to be dragged ". At first, I added the "ui-widget-content" category to all elements to be dragged. However, the drag test results show that the element can only be dragged in the container where it is located, and then dragged to the right. The div displays a horizontal or vertical scroll bar. I don't know if the parameter settings are incorrect. Container sets overflow: auto.
Shows the effect:

Because the final left-side element node uses Ajax to access the background to return json data, and then dynamically generates this structure through Javascript, it cannot bind a drag event to the dynamically generated element, nor can it call the draggable method, so I used a div called "Easy to drag elements in the middle", which is always on the page. It is not displayed by default, as long as the user starts to drag the elements on the left, it will appear. Of course, you need to manually add a lot of code here.

Copy codeThe Code is as follows: <div id = 'draggablediv 'class = "ui-widget-content">
Drag container elements in the middle
</Div>
<Script type = "text/javascript">
$ ("# DraggableDiv"). draggable ({
Containment: "parent ",
Drag: function (event, ui) {console. log ("dragging ");},
Stop: function () {console. log ("drag to end ");}
});
</Script>

Step 2:Copy the content of the element to be dragged to draggableDiv. When the parent node is dragged, the child node element under it must also be dragged to the right. If the child node element is dragged, the child node element is directly displayed on the right. The parent node is opposite to the child node, because the node in the left tree structure can be infinitely level, so an element may be a child node element or a parent node element. By listening to mouse mousedown and mouseup events, you can determine whether you are dragging elements. The principles of this step are as follows:

When you drag Node B, first copy the content on Element B to the draggableDiv element. When you drag Element B, the draggableDiv element is actually dragged. Therefore, we need to calculate the position of the clicked B element, and then let draggableDiv display the correct position when dragging, and then drag the draggableDiv element. The user looks like the B node element to be dragged.Copy codeCode: var clickElement = null; $ (". threepanels. ptreelist"). bind ("mousedown", function (event ){
// Obtain the content of the current mousedown Element
Var itemContent = contents (this).html (); var draggableDiv =$ ("# draggableDiv ");
Detail (draggablediv).css ({"display": "block", "height": 0 });
// Copy the clicked Element Content
ClickElement = $ (this). clone ();
Var currentdiv = $ (this). offset (); values (draggablediv).css ({"top": currentdiv. top, "left": currentdiv. left}); draggableDiv. trigger (event );
// Cancel the default action return false ;});
$ ("# DraggableDiv"). mouseup (function (event) {detail (this).css ({"height": "0 "});});
// Cursor position when dragging an element
Var dragDivLeft = 0;
Var dragDivTop = 0;
$ ("# DraggableDiv "). draggable ({containment: "parent", drag: function (event, ui) {$ ("# draggableDiv" ).css ({"width": "260px", "height ": "22px "});
$ ("# DraggableDiv"). append (clickElement );
Var closeTop = $ (". closeBar"). offset (). top;
DragDivLeft = event.tar get. offsetLeft;
DragDivTop = event.tar get. offsetTop ;},
Stop: function (){
// Drag and drop to clear the container content
$ ("# DraggableDiv" developer.html ("");
$ ("# DraggableDiv" ).css ({"height": "0 "});}
});

Step 3: place the elements on the right to the specified position
You need to drag the element to the specified region and then release it. Complete the "release" operation. As you can see, I save the left and bottom edge of the element to an array. Then, during the drag process, the left side of the drag is recorded all the time. When it is placed on the right side, you can determine the position where the current element is to be placed. You can download the code to view details.
After the code is completedAs follows:

Download Code:DragandDrop.rar