Drag and Drop Tree View

drag-and-drop-tree-view.markdown

Drag and Drop Tree View

Uses jQuery UI to create a tree-view structure whose nodes can be dragged and dropped. Does basic validation to ensure a parent node is not dropped on a child node. Removes empty UL elements.

Forked from Josh Einstein's Pen Drag and Drop Tree View.

A Pen by Lanorise Cainion on CodePen.

License.

index.html

<section style="padding: 10px;">

  <p>Drag the equipment nodes with the mouse. Equipment nodes can be arranged in any level of hierarchy under a facility. Facilities cannot be moved. A parent cannot be dragged under one of it's descendants.</p>
  
  <p>Double click to edit the label of a node.</p>
  
  <ul id="dragRoot">
    <li><i class="icon-building"></i> <span class="node-facility">Facility F1</span>
      <ul>
        <li><i class="icon-hdd"></i> <span class="node-cpe">Example Equipment A</span>
          <ul>
            <li><i class="icon-hdd"></i> <span class="node-cpe">Example Equipment A1</span></li>
            <li><i class="icon-hdd"></i> <span class="node-cpe">Example Equipment A2</span></li>
            <li><i class="icon-hdd"></i> <span class="node-cpe">Example Equipment A3</span></li>
          </ul>
        </li>
        <li><i class="icon-hdd"></i> <span class="node-cpe">Example Equipment B</span>
          <ul>
            <li><i class="icon-hdd"></i> <span class="node-cpe">Example Equipment B1</span></li>
            <li><i class="icon-hdd"></i> <span class="node-cpe">Example Equipment B2</span></li>
            <li><i class="icon-hdd"></i> <span class="node-cpe">Example Equipment B3</span></li>
          </ul>
        </li>
        <li><i class="icon-hdd"></i> <span class="node-cpe">Example Equipment C</span>
          <ul>
            <li><i class="icon-hdd"></i> <span class="node-cpe">Example Equipment C1</span></li>
            <li><i class="icon-hdd"></i> <span class="node-cpe">Example Equipment C2</span></li>
            <li><i class="icon-hdd"></i> <span class="node-cpe">Example Equipment C3</span></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><i class="icon-building"></i> <span class="node-facility">Facility F2</span></li>
    <li><i class="icon-building"></i> <span class="node-facility">Facility F3</span></li>
  </ul>

</section>

script.js

var DragAndDrop = (function (DragAndDrop) {

    function shouldAcceptDrop(item) {

        var $target = $(this).closest("li");
        var $item = item.closest("li");

        if ($.contains($item[0], $target[0])) {
            // can't drop on one of your children!
            return false;
        }

        return true;

    }

    function itemOver(event, ui) {
    }

    function itemOut(event, ui) {
    }

    function itemDropped(event, ui) {

        var $target = $(this).closest("li");
        var $item = ui.draggable.closest("li");
        
        var $srcUL = $item.parent("ul");
        var $dstUL = $target.children("ul").first();

        // destination may not have a UL yet
        if ($dstUL.length == 0) {
            $dstUL = $("<ul></ul>");
            $target.append($dstUL);
        }

        $item.slideUp(50, function() {

          $dstUL.append($item);
  
          if ($srcUL.children("li").length == 0) {
              $srcUL.remove();
          }
          
          $item.slideDown(50, function() {
            $item.css('display', '');
          });

        });

    }

    DragAndDrop.enable = function (selector) {

        $(selector).find(".node-cpe").draggable({
            helper: "clone"
        });

        $(selector).find(".node-cpe, .node-facility").droppable({
            activeClass: "active",
            hoverClass: "hover",
            accept: shouldAcceptDrop,
            over: itemOver,
            out: itemOut,
            drop: itemDropped,
            greedy: true,
            tolerance: "pointer"
        });

    };

    return DragAndDrop;

})(DragAndDrop || {});

(function ($) {
  
  $.fn.beginEditing = function(whenDone) {
    
    if (!whenDone) { whenDone = function() { }; }
    
    var $node = this;
    var $editor = $("<input type='text' style='width:auto; min-width: 25px;'></input>");
    var currentValue = $node.text();
    
    function commit() {
      $editor.remove();
      $node.text($editor.val());
      whenDone($node);
    }
    
    function cancel() {
      $editor.remove();
      $node.text(currentValue);
      whenDone($node);
    }
    
    $editor.val(currentValue);
    $editor.blur(function() { commit(); });
    $editor.keydown(function(event) {
      if (event.which == 27) { cancel(); return false; }
      else if (event.which == 13) { commit(); return false; }
    });

    $node.empty();
    $node.append($editor);
    $editor.focus();
    $editor.select();
    
  };
  
})(jQuery);

$(function () {
  DragAndDrop.enable("#dragRoot");
  
  $(document).on("dblclick", "#dragRoot *[class*=node]", function() {
    $(this).beginEditing();
  });
  
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>

style.less

@Color_Facility: navy;
@Color_Equipment: black;
@Color_DropBackground: navy;
@Color_DropForeground: white;
@Color_Lines: silver;
@IndentSize: 20px;

.no-select() {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.no-wrap() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dragRoot {
  .no-select();
  
  cursor: default;
  border: 1px solid black;
  margin: 10px;
  padding: 10px;
  width: 300px;
  overflow-y: scroll;
  white-space: nowrap;

  ul {
    display: block;
    margin: 0;
    padding: 0 0 0 @IndentSize;
  }

  li {
    
    display: block;
    margin: 2px;
    padding: 2px 2px 2px 0;
  
    [class*="node"] {

      display: inline-block;

      &.hover {
        background-color: @Color_DropBackground;
        color: @Color_DropForeground;
      }
      
    }

    .node-facility {
      color: @Color_Facility;
      font-weight: bold;
    }
    
    .node-cpe {
      color: @Color_Equipment;
      cursor: pointer;
    }

  }

  li li {
      border-left: 1px solid @Color_Lines;
      &:before {
        color: @Color_Lines;
        font-weight: 300;
        content: "— ";
      }
  }

}

styles

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />