jsPlumb не перетаскивание строк в enpoints

Question

Я очень новичок в jsPlumb, и я пытаюсь обвести вокруг него голову. Проверьте эту ссылку: http://thejohnkay.com/jsplumb. Когда вы перетаскиваете объект и левее и бросаете его в область справа, я получил его туда, где он создает элементы и их соответствующие конечные точки. Я просто не могу создавать линии друг к другу, перетаскивая привязки, и это заставляет меня гайки ,

основной файл я дело с http://thejohnkay.com/jsplumb/js/main.js

Если вы знакомы с jsPlumb, пожалуйста, помогите мне! Заранее спасибо.

Answer 1

Я реплицировать проблему с этим Working Fiddle

Единственное, что вы должны сделать, это обернуть main.js скрипт в РОМ готовый блок

Я сделал некоторые исправления, ниже является main.js

$(function() { 
    "use strict"; 

    var jsPlumbMaster = function() { 
     //function jsPlumbMaster(){ 
     if (typeof jsPlumb !== 'undefined') { 
      this.countBox = 0; 
      this.instance = jsPlumb.getInstance({ 
       // default drag options 
       DragOptions: { 
        cursor: 'pointer', 
        zIndex: 2000 
       }, 
       // the overlays to decorate each connection with. note that the label overlay uses a function to generate the label text; in this 
       // case it returns the 'labelText' member that we set on each connection in the 'init' method below. 
       ConnectionOverlays: [ 
        ["Arrow", { 
         location: 1 
        }], 
        ["Label", { 
         location: 0.1, 
         id: "label", 
         cssClass: "aLabel" 
        }] 
       ], 
       Container: $(".drop-area") 
      }); 
     } 
    }; 

    jsPlumbMaster.prototype = { 
     connectorPaintStyle: { 
      lineWidth: 4, 
      strokeStyle: "#61B7CF", 
      joinstyle: "round", 
      outlineColor: "white", 
      outlineWidth: 2 
     }, 
     // .. and this is the hover style. 
     connectorHoverStyle: { 
      lineWidth: 4, 
      strokeStyle: "#216477", 
      outlineWidth: 2, 
      outlineColor: "white" 
     }, 
     endpointHoverStyle: { 
      fillStyle: "#216477", 
      strokeStyle: "#216477" 
     }, 
     // the definition of source endpoints (the small blue ones) 
     sourceEndpoint: { 
      endpoint: "Dot", 
      paintStyle: { 
       strokeStyle: "#7AB02C", 
       fillStyle: "transparent", 
       radius: 7, 
       lineWidth: 3 
      }, 
      isSource: true, 
      connector: ["Flowchart", { 
       stub: [40, 60], 
       gap: 10, 
       cornerRadius: 5, 
       alwaysRespectStubs: true 
      }], 
      connectorStyle: this.connectorPaintStyle, 
      hoverPaintStyle: this.endpointHoverStyle, 
      connectorHoverStyle: this.connectorHoverStyle, 
      dragOptions: {}, 
      overlays: [ 
       ["Label", { 
        location: [0.5, 1.5], 
        label: "Drag", 
        cssClass: "endpointSourceLabel" 
       }] 
      ] 
     }, 
     // the definition of target endpoints (will appear when the user drags a connection) 
     targetEndpoint: { 
      endpoint: "Dot", 
      paintStyle: { 
       fillStyle: "#7AB02C", 
       radius: 11 
      }, 
      hoverPaintStyle: this.endpointHoverStyle, 
      maxConnections: -1, 
      dropOptions: { 
       hoverClass: "hover", 
       activeClass: "active" 
      }, 
      isTarget: true, 
      overlays: [ 
       ["Label", { 
        location: [0.5, -0.5], 
        label: "Drop", 
        cssClass: "endpointTargetLabel" 
       }] 
      ] 
     }, 
     init: function (connection) { 
      connection.getOverlay("label").setLabel(connection.sourceId.substring(15) + "-" + connection.targetId.substring(15)); 
      connection.bind("editCompleted", function (o) { 
       if (typeof console != "undefined") console.log("connection edited. path is now ", o.path); 
      }); 
     }, 
     addToStage: function (top, left, label) { 
      //var top = parseInt(moveQueue[0][0]); 
      //var left = parseInt(moveQueue[0][1]); 

      $('<div>', { 
       'class': 'window', 
        'id': ('flowchart' + this.countBox) 
      }) 
       .css({ 
       left: left, 
       top: top, 
       position: 'absolute' 
      }) 
       .text(label) 
       .appendTo($('.drop-area')); 
      //console.log(this.instance) 
      this._addEndpoints($('#flowchart' + this.countBox), ["LeftMiddle", "BottomCenter"], ["TopCenter", "RightMiddle"]); 
      this.countBox++; 


      this.instance.draggable($(".drop-area .window"), { 
       grid: [20, 20], 
       containment: 'body' 
      }); 

     }, 
     _addEndpoints: function (toId, sourceAnchors, targetAnchors) { 
      for (var i = 0; i < sourceAnchors.length; i++) { 
       var sourceUUID = toId + sourceAnchors[i]; 
       console.log(sourceUUID); 
       this.instance.addEndpoint(toId, this.sourceEndpoint, { 
        anchor: sourceAnchors[i], 
        uuid: sourceUUID 
       }); 
      } 
      for (var j = 0; j < targetAnchors.length; j++) { 
       var targetUUID = toId + targetAnchors[j]; 
       this.instance.addEndpoint(toId, this.targetEndpoint, { 
        anchor: targetAnchors[j], 
        uuid: targetUUID 
       }); 
      } 
     } 
    }; 


    var JPM = new jsPlumbMaster(); 

    $(document).ready(function() { 

     $('.panel').draggable({ 
      containment: 'body', 
      stop: function (e, ui) { 
       var top = parseInt($(this).css('top'), 10) + 250; 
       var left = parseInt($(this).css('left'), 10); 
       var label = $(this).text(); 
       if (left >= parseInt($('#left-col').width(), 10)) { 
        $(this).remove(); 
        left = left - 250; 
        JPM.addToStage(top, left, label); 
       } 
      } 
     }); 

     $('#box').keyup(function() { 
      var valThis = $(this).val().toLowerCase(); 
      $('.filter .panel .category').each(function() { 
       var text = $(this).text().toLowerCase(); 
       if (text.indexOf(valThis) > -1) $(this).closest('.panel').fadeIn('fast'); 
       else $(this).closest('.panel').fadeOut('fast'); 
      }); 
     }); 
    }).foundation(); 

});