In the previous article I have introduced the basic drag-and-drop principle of web development, now gives the function to be completed. The effect of the last run
as shown in the following illustration:
Main function Requirements Description:
1. The left element structure is eventually generated via AJAX call server data to support multilevel elements. The parent node can be folded up
2. The user can drag and drop the element from the left to the right. If you are dragging the parent node element, you need to drag the element of its child node to the right
3. The element is placed to the right, and the area on the right that can accept elements is 2 possible. A new area, similar to the "East China Jiaotong University", is shown. The other is to drag and drop into an area that already has elements. The relationship between the two is "or". A single element region has a "non" and "and" relationship. Click on the right delete button to delete the node elements.
The first step: the left element can be dragged
The official example is to add class= "ui-widget-content" directly on the element to be dragged. Initially I added the "ui-widget-content" category to all the elements to be dragged. However, test the drag result and find that the element can only be dragged in the container it is in, and then drag to the right, and the div will appear with horizontal or vertical scroll bars. I don't know if I'm on the wrong set of parameters. Container set the Overflow:auto.
The effect is shown in the following illustration:
Because the end of the left element node is the AJAX access to the background to return JSON data, and then dynamically generated through JavaScript this structure, it can not be dynamically generated elements to bind drag events, can not invoke the Draggable method, so I used a call " The middle drag easy element ", this div has been on the page. It just doesn't show up by default, as long as the user starts dragging the left element, it appears. Of course, you need to manually add a lot of code here.
Copy Code code as follows:
<div id= ' draggablediv ' class= ' ui-widget-content ' >
Drag container element in the middle
</div>
<script type= "Text/javascript" >
$ ("#draggableDiv"). Draggable ({
Containment: "Parent",
Drag:function (event, UI) {Console.log ("drag in");},
Stop:function () {Console.log ("drag End");}
});
</script>
Step Two:Copy the element content that will be dragged onto the draggablediv. When you implement dragging the parent node, the child node elements below it are also dragged to the right. If you are dragging a child node element, the child node element is displayed directly to the right. The parent and child nodes are relative, because the nodes of the left tree structure can be infinitely level, so an element is either a child node element or a parent node element. The MouseDown and MouseUp events of the mouse are monitored to determine the user's drag element. The principle of this step is shown in the following illustration:
When the user drags the B node, first copy the contents of the B element to the Draggablediv element, and when the user drags the B element, it is actually dragging the draggablediv element. So we're going to figure out the position of the B element we clicked, and let Draggablediv show the correct position when dragging, and then drag is the Draggablediv element, and the user looks like a dragged B-node element.
Copy Code code as follows:
var clickelement = null; $ (". Threepanels. Ptreelist"). Bind ("MouseDown", function (event) {
Gets the contents of the current MouseDown element
var itemcontent = $ (this). html (); var Draggablediv = $ ("#draggableDiv");
$ (draggablediv). CSS ({"Display": "Block", "height": 0});
Copy the content of the clicked element
Clickelement = $ (this). Clone ();
var Currentdiv = $ (this). offset (); $ (draggablediv). css ({"Top": Currentdiv.top, Left: Currentdiv.left}); Draggablediv.trigger (event);
Cancels the default behavior return false; });
$ ("#draggableDiv"). MouseUp (function (event) {$ (this). css ({"height": "0"});};
The position of the mouse 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.target.offsetLeft;
Dragdivtop = Event.target.offsetTop; },
Stop:function () {
Drag and drop end, empty container contents
$ ("#draggableDiv"). HTML ("");
$ ("#draggableDiv"). CSS ({"height": "0"}); }
});
Step Three: The element on the right can be placed in the specified position
You need to drag the element to the specified area and then release the operation. Completes the "put" operation. As you can see from the figure above, I'm saving the top left of the element and the left of the bottom edge to an array. You can then determine where the current element will be placed in the "drag" process by recording the left side of the drag and putting it to the right. You can download code to view the details.
After completing the code
The effect chart is as follows:
Code Download:Draganddrop.rar
