JSPlumb state Verbindung auf Drag und mehrere divs aus einem anderen Behälter fallen, die ziehbar divs enthält

Question

Ich habe zwei divs ein enthält ziehbar div und andere div akzeptiert Tropfen:

HTML

<div class="divContainer"> 
    <div class="dragMe header active" id="header"> 
     Header 
    </div> 

    <div class="dragMe source ui-state-disabled" id="source" > 
     Source 
    </div> 
    <div class="dragMe target ui-state-disabled" id="target" > 
     Target 
    </div> 
    <div class="dragMe fields ui-state-disabled " id="fields" > 
     Fields Selection 
    </div> 

    <div class="dragMe options ui-state-disabled " id="options" ">Additional Options</div> 
    <div class="dragMe summary ui-state-disabled" id="summary" > 
     Summary 
    </div> 
</div> 

und Behälter wie

<div class="divDropzone "> 
</div> 

Jetzt bin in der Lage zu mir in divDropZone und in der Lage zu ziehen Sie eine Linie zu zeichnen betw een sie uns jsplumb auf Drop-Funktion.

JQuery-Code:

$(".divDropzone").droppable({ 
    drop: function (event, ui) { 
     $.ui.ddmanager.current.cancelHelperRemoval = true; 

     var dropElem = ui.draggable.attr('id'); 

     $(".divContainer #" + dropElem).draggable({ 
      disabled: true, 
      cursor: "none" 
     }).removeClass('active'); 


     if ($.inArray(dropElem, nodes) < 0) 
     { 
      dropId = dropElem + '_dropped'; 
      nodes.push(dropId); 
      if (items.length == 0) { 
       items[0] = dropId; 
       items[1] = null; 
      } 
      else { 
       items[1] = items[0]; 
       items[0] = dropId; 
      } 
     } 

     $(this).find("div." + dropElem).attr("id", dropId); 

     $(".divDropzone #" + dropId).draggable({ 
      containment: "parent", 
     }).removeClass('active'); 

     if (dropElem == "header") { 
     } 

     else if (dropElem == "source") { 
      connect("header_dropped","source_dropped"); 
     } 

     else if (dropElem == "target") { 
      connect("source_dropped","target_dropped"); 
     } 

     else if (dropElem == "fields") { 
      connect("target_dropped","fields_dropped"); 
     } 

     else if (dropElem == "options") { 
      connect("fields_dropped","options_dropped"); 
     } 

     else if (dropElem == "summary") { 
      connect("options_dropped","summary_dropped"); 
     } 
    } 
}); 

und jsplumb Code ist ...

function jspsample(source, target) { 

    //jsPlumb.repaintEverything(); 
    jsPlumb.ready(function() { 
     var instance = jsPlumb.getInstance({ 
      Endpoint: ["Dot", { radius: 2 }], 
      Connector: "StateMachine", 
      HoverPaintStyle: { strokeStyle: "#1e8151", lineWidth: 2 }, 
      ConnectionOverlays: [ 
       ["Arrow", { 
        location: 1, 
        id: "arrow", 
        length: 14, 
        foldback: 0.8 
       }], 
       //[ "Label", { label: "FOO", id: "label", cssClass: "aLabel" }] 
      ], 
      Container: "divDropzone" 
     }); 

     instance.registerConnectionType("basic", { anchor: "Continuous", connector: "StateMachine" }); 

     window.jsp = instance; 

      var windows = jsPlumb.getSelector(".divDropzone .dragMe"); 

      var initNode = function (el) { 

       instance.draggable(el); 

       instance.makeSource(el, { 
        filter: ".ep", 
        anchor: "Continuous", 
        connectorStyle: { strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4 }, 
        connectionType: "basic", 
        extract: { 
         "action": "the-action" 
        }, 
        maxConnections: 2, 
        onMaxConnections: function (info, e) { 
         alert("Maximum connections (" + info.maxConnections + ") reached"); 
        } 
       }); 

       instance.makeTarget(el, { 
        dropOptions: { hoverClass: "dragHover" }, 
        anchor: "Continuous", 
        allowLoopback: false 
       }); 

       instance.fire("jsPlumbDemoNodeAdded", el); 
      }; 

      instance.batch(function() { 
       for (var i = 0; i < windows.length; i++) { 
        initNode(windows[i], true); 

       } 
       var cssClass=source+"_"+target; 
       instance.connect({ 
        source: source, 
        target: target, 
        type: "basic", 
        cssClass: cssClass 
       }); 

      }); 
      jsPlumb.fire("jsPlumbDemoLoaded", instance); 

    }); 
} 

der Code gut funktioniert. Pfeile sind am Abwurf bindend. Aber das Problem ist, wenn ich Drag div in divDropZone ziehen, folgen alle Verbindung nicht ziehen Element. Nur nur Zielendpunkt bewegt sich nicht Quelle Endpunkt ....

ich alles versucht habe, ich konnte aber keinen Gebrauch ...

Wie kann ich dieses Problem lösen?

Answer 1

es von myslelf Gelöst ...

Code ist wie

var instance = []; 
    var initNode; 
    jsPlumb.ready(function() { 

     instance = jsPlumb.getInstance({ 
      Endpoint: ["Dot", { radius: 2 }], 
      Connector: "StateMachine", 
      HoverPaintStyle: { strokeStyle: "#1e8151", lineWidth: 2 }, 
      ConnectionOverlays: [ 
       ["Arrow", { 
        location: 1, 
        id: "arrow", 
        length: 14, 
        foldback: 0.8 
       }], 
       ["Label", { label: "FOO", id: "label", cssClass: "aLabel" }] 
      ], 
      Container: "divDropzone" 
     }); 


     instance.registerConnectionType("basic", { anchor: "Continuous", connector: "StateMachine" }); 
     window.jsp = instance; 
     //windows = jsPlumb.getSelector(".divDropzone .dragMe"); 
     initNode = function (el) { 
      // initialise draggable elements. 
      instance.draggable(el); 
      // instance.draggable(source); 

      instance.makeSource(el, { 
       filter: ".ep", 
       anchor: "Continuous", 
       connectorStyle: { strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4 }, 
       connectionType: "basic", 
       extract: { 
        "action": "the-action" 
       }, 
       maxConnections: 2, 
       onMaxConnections: function (info, e) { 
        alert("Maximum connections (" + info.maxConnections + ") reached"); 
       } 
      }); 

      instance.makeTarget(el, { 
       dropOptions: { hoverClass: "dragHover" }, 
       anchor: "Continuous", 
       allowLoopback: false 
      }); 

      instance.fire("jsPlumbDemoNodeAdded", el); 
     }; 

    }); 

    $(function() { 

     $("#header").draggable({ 
      helper: "clone", 
      revert: "invalid", 
      appendTo: ".divDropzone", 
      distance: 50, 
      //addClasses: false 
     }); 

     $("#source,#target,#fields,#options,#summary,#field").draggable({ 
      disabled: true, 

     }); 

     var nodes = []; 
     var dropId; 

     //drop zone 
     $(".divDropzone").droppable({ 
      drop: function (event, ui) { 
       $.ui.ddmanager.current.cancelHelperRemoval = true; 

       var dropElem = ui.draggable.attr('id'); 

       if ($.inArray(dropElem, nodes) < 0) { 

        dropId = dropElem + '_dropped'; 
        nodes.push(dropId); 

       } 

       $(this).find("div." + dropElem).attr("id", dropId); 

       $(".divDropzone #" + dropId).draggable({ 
        containment: "parent", 
       }); 

       if (dropElem == "header") { 
        //var windows = jsPlumb.getSelector(".divDropzone .dragMe"); 
        //initNode('header_dropped', true); 

       } 

       else if (dropElem == "source") { 
        adterDrop('target'); 
       } 

       else if (dropElem == "target") { 
        jsPlumb.repaintEverything(); 
        var windows = jsPlumb.getSelector(".divDropzone .dragMe"); 
        instance.bind("connection", function (info) { 
         info.connection.getOverlay("label").setLabel(info.connection.id); 
        }); 
        instance.batch(function() { 
         for (var i = 0; i < windows.length; i++) { 
          initNode(windows[i], true); 
         } 
         instance.connect({ 
          source: "source_dropped", 
          target: "target_dropped", 
          type: "basic" 
         }); 
        }); 
             } 

       else if (dropElem == "fields") { 
        jsPlumb.repaintEverything(); 
        var windows = jsPlumb.getSelector(".divDropzone .dragMe"); 
        instance.bind("connection", function (info) { 
         info.connection.getOverlay("label").setLabel(info.connection.id); 
        }); 
        instance.batch(function() { 
         for (var i = 0; i < windows.length; i++) { 
          initNode(windows[i], true); 
         } 
         instance.connect({ 
          source: "target_dropped", 
          target: "fields_dropped", 
          type: "basic" 
         }); 
        }); 

       } 
      } 
     });