www.webdeveloper.com
Results 1 to 2 of 2

Thread: Using jQuery UI to make a tree of sortable, droppable, ARBITRARILY-NESTED divs

Hybrid View

  1. #1
    Join Date
    Jan 2014
    Posts
    1

    Using jQuery UI to make a tree of sortable, droppable, ARBITRARILY-NESTED divs

    I’m a Javascript noob trying to write an HTML/CSS/Javascript/jQuery/jQuery UI program to drag and drop SORTABLE divs in and out of one another to make an arbitrary tree structure. You can run my current code at http://jsfiddle.net/randomhittingking/5S7v7/. The Javascript part is

    Code:
    $(document).ready(function(){
        $(".node").sortable({
            receive: function(event, ui){}
        });
      $(".node").droppable(
        {
          greedy: true,
          drop: function(event, ui){
            var dropped = ui.draggable;
            var droppedOn = $(this);
            dropped.remove();
            droppedOn.append("<div class=\"node\">" + dropped.html() + "</div>");
          }
        }
      );
    });
    I have several problems, such as:

    • I can’t drag divs into inner divs. For example, if div 3 is nested inside div 2 and div 1 is outside both these divs, then I can’t drag/drop div 1 into div 3.
    • After some dragging and dropping, the program stops letting me drop divs into nonempty divs.
    • Inner divs loose their sortability. And if divs 3 and 4 are nested inside div 2 and div 1 is outside all these divs, then div 1 is not “sortable” with respect to divs 3 and 4.

  2. #2
    Join Date
    Feb 2012
    Location
    Tallahassee, FL
    Posts
    280
    Well, first off, the following code removed a binded .node and then adds another that is not bound to anything.
    Code:
    dropped.remove();
            droppedOn.append("<div class=\"node\">" + dropped.html() + "</div>");
    Try this. It rebinds the .nodes after dropping them (http://jsfiddle.net/8jZRy/).
    Code:
    function bindNodes() {
    
        nodes = $(".node");
        nodes.sortable();
        nodes.droppable({
            greedy: true,
            drop: function (event, ui) {
                var dropped = ui.draggable;
                var droppedOn = $(this);
                droppedOn.append("<div class=\"node\">" + dropped.html() + "</div>");
                dropped.remove();
                bindNodes();
            }
        });
    }
    nodes = {};
    $(document).ready(function () {
    
        bindNodes();
    });

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles