Draggable-Eigenschaft verloren nach dem Expandieren Knoten mit bootstrap-treeview

Ich versuche, ein Widget für eine Webanwendung zu entwickeln, in dem der Benutzer Elemente aus einer hierarchischen Liste in ein div ziehen und ablegen kann. Für die Liste verwende ich die bekannten bootstrap-treeview plugin und für die Drag & Drop-Funktion JQuery UI ziehbare und Drop-fähige Funktionen.Draggable-Eigenschaft verloren nach dem Expandieren Knoten mit bootstrap-treeview

Es funktioniert gut nach dem Laden der Seite können die Elemente in der Liste gezogen werden. Sobald ich jedoch eines der Listenelemente expandiere, können sie nicht mehr gezogen werden.

Ich habe versucht, das ziehbare Handle mit dem Ereignisereigniserweiterung expandNode wieder hinzuzufügen, aber es funktioniert nicht. Ich habe auch überprüft, dass das Ereignis ausgelöst wird, aber aus irgendeinem Grund wird die ziehbare Bedingung nicht erneut an die Listenelemente angehängt.

Sie können den minimalen Code, der den Fehler reproduziert, in this JSFiddle überprüfen.

Irgendeine Idee über was mache ich falsch?

Unter allen Code für die Vollständigkeit.

<html> 
    <head> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css"> 

     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js" type="text/javascript"></script>   

     <style> 
      .item-list { 
       height: 8em; 
       color: black; 
      } 

      .droppable-area { 
       height: 8em; 
       outline: 2px dashed blue; 
      } 
     </style> 

    </head> 



    <body> 
     <div class="container"> 
      <div class="row"> 
      <p> 
      Item list: 
      </p> 
      </div> 
      <div class="row"> 
      <div class="col-md-6" id="item-list"> 
      </div> 
      <div class="col-md-6 droppable-area"> 
      </div> 
      </div> 
     </div> 

    </body> 

    <script type="text/javascript"> 
     var enableDraggables = function(event, data) { 
      $(".node-item-list").draggable({ 
      opacity: 0.7, 
      helper: "clone", 
      revert: true 
      }); 
      return true; 
     }; 

     var itemTree = [ 
      { text: "item 1", nodes:[{text: "subitem 1-1"},{text: "subitem 1-2"}]}, 
      { text: "item 2", nodes:[{text: "subitem 2-1"},{text: "subitem 2-2"},{text: "subitem 2-3"}]}, 
      { text: "item 3" } 
     ]; 

     $("#item-list").treeview({ 
      data: itemTree, 
      expandIcon: "glyphicon glyphicon-chevron-right", 
      collapseIcon: "glyphicon glyphicon-chevron-down", 
      onNodeSelected: enableDraggables, 
      onNodeUnselected: enableDraggables, 
      onNodeChecked: enableDraggables, 
      onNodeUnchecked: enableDraggables, 
      onNodeCollapsed: enableDraggables, 
      onNodeExpanded: enableDraggables 
     }); 
     $("#item-list").treeview('collapseAll', { 
      silent: true 
     }); 

     enableDraggables(); 

     $(".droppable-area").droppable({ 
      accept: ".node-item-list" 
     }); 


    </script> 
</html>

Quelle

2017-11-08 joanlofe

bootstrap-treeview zerstört und erstellt die Baumstruktur jedes Mal neu, wenn ein Knoten erweitert oder reduziert wird, wodurch die Klassen entfernt werden, die von draggable hinzugefügt wurden.

Um die ui-draggable und ui-draggable-handle Klassen auf jedem Knoten zu halten, nachdem der Baum gemacht wird Ihnen die Tree.prototype.template Elementvorlage im bootstrap-treeview-Plugin bearbeiten müssen diese Klassen umfassen:

Tree.prototype.template = { 
    ... 
    item: '<li class="list-group-item ui-draggable ui-draggable-handle"></li>', 
    ... 
};

Update:

Basierend auf Ihren Kommentar, sollten Sie die Tree.prototype.buildTree Funktion nur anwenden, um die ui-draggable Klassen auf das Element zu ändern, indem er die nodes oderÜberprüfungEigenschaften. Sie müssen definieren, was die Einschränkungen sind.

var treeItem = $(_this.template.item) 
       .addClass('node-' + _this.elementId) 
       .addClass(level === 1 ? 'ui-draggable' : '') // modify this line as needed 
       ...

Quelle

2017-11-08 15:44:45

Interessante Lösung, scheint es das Problem zu lösen. Es hat jedoch zwei Nachteile. Erstens muss ich die Bibliothek modifizieren, und zweitens können alle Knoten ziehbar gemacht werden, und ich brauche nur Blattknoten, um ziehbar zu sein. Der erste Nachteil ist etwas, mit dem ich leben könnte, aber das zweite muss ich lösen. – joanlofe

Danke Jason. Schließlich habe ich eine leicht modifizierte Form Ihrer Lösung verwendet, aber im Grunde hat es funktioniert. – joanlofe

Ich habe auch Probleme, Ihr Problem zu lösen. Meine Vermutung ist, dass beide Plugins einfach nicht kompatibel sind. Sie könnten versuchen, ein anderes Plugin wie https://github.com/mar10/fancytree zu verwenden, das sowohl Ziehen als auch Ziehen und eine Baumansicht kombiniert.

Quelle

2017-11-08 15:19:48

Draggable-Eigenschaft verloren nach dem Expandieren Knoten mit bootstrap-treeview

Antwort

Verwandte Themen