Problems with the creation of the hierarchical tree in jQuery?


Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/code-flow.club/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
3 views
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.
    by | 3 views

    3 Answers

    0 like 0 dislike
    I advise you to watch how it's done in the last WordPress e there is a similar tug in the menu. Someone else's code view sometimes it is useful.
    by
    0 like 0 dislike
    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.

      For this case take the "category B" in a separate element, for example
      \r
      The example doesn't work for me. It would be nice to lay out somewhere
      by
      0 like 0 dislike
      The fact is that when draggable jqueryui uses position: relative, so after opening the top level you need to add the height of the open level.
      by

      Related questions

      0 like 0 dislike
      1 answer
      0 like 0 dislike
      2 answers
      0 like 0 dislike
      1 answer
      asked Apr 5, 2019 by TsarS
      0 like 0 dislike
      3 answers
      asked Mar 25, 2019 by dudeonthehorse
      0 like 0 dislike
      1 answer
      110,608 questions
      257,186 answers
      0 comments
      22,469 users