Trying to do for one of their projects, "hierarchical tree" (in fact the analogue of
jQuery Treeview,
updated jstree and similar plugins), which also involved the functionality of drag & drop. For controlling the capability of drag & drop using
jQuery UI. Everything seems to work, but stalled at the same time.
Digression: Yes, I know that's essentially writing a bike, and that it is possible not to be soared and take one of the most common plugins, but for me it is important to learn how to make different chips on jQuery drag & drop, because he's a lot more where need in my project.So what we have. There are a unordered list
the elements of which represent categories. Categories can be subcategories, and those, in turn, their subcategories, etc. If the category has subcategories, then left the icon "plus" sign, clicking on which will happen on the server and in response we will get the list of subcategories which will be automatically inserted in the form of a sublist, i.e. like this:
category Acategory Bsubcategory Dsubcategory Esubcategory Fcategory C
Digression: Yes, I know that according to the rules of HTML syntax sublist should be located inside the parent element but in this case, together with the category "category B" will hang over the cursor and the whole sub-list of sub-categories that we did not want.Using jQuery UI I'm doing each element you drop (draggable), and a "host" (droppable).
Further on the idea I want to do in the following way: the user captures and begins to "drag" a category above the list of other categories; once they drag element is over one of the categories, there is a request to the server, we receive and insert the list of subcategories. This is done in order to make life easier for the user: if the user wants to make a category "category C" subsection "subcategory F", then it will be enough to capture the "category C", hold it above the "category B" to open a list of subcategories, then drag and release over "subcategory F".
Everything seems to works fine, but there is one
BUTwhere I stalled: the user captures the "category C" and holds it over the "category B", thus forcing the operating the list of subcategories; in the time of the appearance of the list of subcategories retained element "category C" moves down relative to the cursor exactly at the height of the entire sublist of categories. This is the problem I can not yet overcome.
As I tried to solve this problem:
1) at the time of the function call is
over (is called when the draggable element is over the droppable element and is in the ready state) tried to remember the position of the dragged item in the global variables like so:
... over:function(event,ui) { _cury = ui.position.top; _curx = ui.position.left; ... } ...
then request a list of sub-categories and after their insertion re-assign the dragged element coordinates:
... ui.position.top = _cury; ui.position.left = _curx; ...
In the end, didn't work.
2) I thought that maybe at the time the sublist and "otprygivat" of the item being dragged, it goes from the ready status and the function is called
out. Then I just moved the assignment of coordinates stored in the function
out:
... out:function(event,ui) { ui.position.top = _cury; ui.position.left = _curx; ... } ...
This didn't work. Also tried to use
ui.offset instead of the
ui.position — did not help. I.e. to obtain the coordinates of the dragged element is normally correct. But the attempt to set them back does not lead to any results. Can someone tell me the solution?
Download full code example with all files and detailed comments.
Watch
an example online.
