The Jquery UI implements a drag-and-drop of multiple selected element operations _jquery

The project needs to implement a drag-and-drop operation, which requires that each selected element can be dragged and sorted after being released to the target container. Consider the jquery-ui more appropriate, after all, it provides the project needs of the interactive event mechanism. Drag, release, sorting, selection and other effects. And in the actual operation, encountered a lot of problems, explain, and finally attach the effect map and code.

1. I use the bootstrap frame, after introducing the Jquery-ui, after adding the drag method for the element, prompts the method is not a function. Find the reason, is the bootstrap and jquery-uide of the $ identifier control conflict. In the introduction of the Jquery-ui JS before adding a statement to solve

<script>
    jquery.noconflict ();
</script>

2.jquery-ui provides a selection of operations (radio, multiple selection), where multiple selection can be held down CTRL with the mouse click multiple selection, you can also drag the mouse over multiple elements to select more than one. There was a problem with the Select and drag operations for the same element.

A: Multiple-selection operation because you can drag on the element, and its own drag-and-drop events have a conflict (the individual thinks the mouse drag and drop the effect of multiple selection is not using shift with the mouse click to use).

B:jquery-ui did not find that multiple separate elements could be dragged at the same time.

I don't know if I'm stupid. Jquery-ui can use its own methods and properties, that is, can support multiple selection and can drag and drop the selected element operation. Any reader who knows, please let us know. 3q!

To sum up, we experimented with multiple jquery-ui properties and events, and tried to remove the Jquery-ui drag-and-drop multiple-selection operation, and did not find the effect I needed. So, consider the decision not to apply the Jquery-ui selection operation. Write a selection operation on your own. Same as the event triggering mechanism we normally use. (Mouse click Radio, CTRL + Mouse SELECT, shift+ mouse), and then with the Jquery-ui drag and drop and sort event mechanism to achieve drag and drop sorting effect.

Insert a mouth, drag the effect of multiple elements, is actually dragging a specified DOM element, you can drag all the nodes need to drop into the element. This needs to match the helper function in the Jquery-ui drag, returning a new drag-and-drop element collection. (Some of the events and attributes about Jquery-ui are available online.) But not too detailed, but also need to do their own experiments.

Okay, put out a simple effect diagram and code

Figure One (effect in drag and drop)

Figure II (after release effect)

The effect is as above, the left Orange is the selected node, the effect of the mouse dragging inside the red ellipse, 3 indicates the number of selected elements; The yellow area on the right indicates the container that can be released and sorted. When dragging and dropping in this area, the nodes are sorted automatically according to the position of the mouse, as shown in the figure, if the mouse is released, the 3 nodes on the left will move to 4. corresponding yellow area.

Of course, the above effect needs to be reset to drag the target to give new elements, and listen to drag, release and so on time, writing user-defined logic. Post your own code, and some events and properties can refer to Jquery-ui's documentation.

<! DOCTYPE html>  

Code is available (no write-select release effect, example is currently a test product, and later to change to plug-in mode). Record these two days of experience. The main thing is to find the event mechanism, to organize ideas and deal with conflict issues spent a certain amount of energy, must be credited.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.