Перетаскиваемые элементы с коннекторами в jsPlumb

Question

Я хочу реализовать приложение сопоставления с перетаскиваемыми элементами. Я использовал следующий код, но когда draggable установлен, элемент div не перетаскивается, только привязка перетаскивается. Что мне не хватает?

JSFiddle

<style> 
.dd{ 
    width:60px; 
    height:60px; 
    border:1px solid red; 
    position:relative; 
} 
</style> 
<div class="container"> 
     <div id="window3" class="dd" style="margin-left:50px;margin-top:100px"></div> 
     <div id="window4" class="dd" style="margin-left:400px;margin-top:100px"></div> 
</div> 
<script> 
    jsPlumb.ready(function() { 
     //   



     jsPlumb.draggable($(".dd")); 



     var endpointOptions = { 
      isSource: true, 
      isTarget: true, 
      endpoint: ["Dot", { 
       radius: 10 
      }], 
      style: { 
       fillStyle: 'blue' 

      }, 
      maxConnections: -1, 
      connector: "Straight", 
      connectorStyle: { 
       lineWidth: 3, 
       strokeStyle: 'black' 

      }, 
      scope: "blackline", 
      dropOptions: { 
       drop: function (e, ui) { 
        alert('drop!'); 
       } 
      } 
     }; 
     var window3Endpoint = jsPlumb.addEndpoint('window3', { 
      anchor: "Right" 
     }, endpointOptions); 
     var window4Endpoint = jsPlumb.addEndpoint('window4', { 
      anchor: "Left" 
     }, endpointOptions); 




    }); 
</script> 

с помощью JQuery Draggable позволяет ДИВ быть перетаскиваться, но затем якоря отделяться.

Так два варианта

1. Используйте $ ("Д-р"). Перетаскиваемым() и найти способ связать анкеры с DIV
2. Сделать DIV перемещаемого в jsPlumb. draggable()

Или мой подход совершенно не так?

UPDATE: я установить позицию CSS как абсолют в дивы и теперь дивы являются перетаскиваться, но до сих пор связывание неисправна

Answer 1

Вы пропустили вызвать jsPlumb.repaintEverything() раз элемент DOM тащится.

Вот версия, которая использует jQuery.draggable()

jsPlumb.ready(function() { 

    $('.dd').draggable({ 
     //listen for element dragged event 
     drag: function(){ 
      jsPlumb.repaintEverything();    
     } 
    }); 


    var endpointOptions = { 
    isSource: true, 
    isTarget: true, 
    endpoint: ["Dot", { 
     radius: 10 
    }], 
    style: { 
     fillStyle: 'blue' 

    }, 
    maxConnections: -1, 
    connector: "Straight", 
    connectorStyle: { 
     lineWidth: 3, 
     strokeStyle: 'black' 

    }, 
    scope: "blackline", 
    dropOptions: { 
     drop: function(e, ui) { 
     alert('drop!'); 
     } 
    } 
    }; 
    var window3Endpoint = jsPlumb.addEndpoint('window3', { 
    anchor: "Right" 
    }, endpointOptions); 
    var window4Endpoint = jsPlumb.addEndpoint('window4', { 
    anchor: "Left" 
    }, endpointOptions); 

}); 

Updated Fiddle