jsPlumb 中带有连接器的可拖动元素

Question

我想实现一个带有可拖动元素的地图应用程序。我使用了以下代码，但是当设置了可拖动时，div 元素不可拖动，只有锚点可拖动。我错过了什么？

<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 可拖动允许 div 可拖动，但锚点会分离。

所以两个选项是

使用 $(".dr").draggable() 并找到一种方法将锚点绑定到 div
在 jsPlumb.draggable()

还是我的做法完全错误？

更新： 我在 div 中将 CSS 位置设置为绝对位置，现在 div 是可拖动的，但仍然是绑定错误

Answer 1

您错过了在拖动 DOM 元素后调用 jsPlumb.repaintEverything()。

这里是使用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

jsPlumb 中带有连接器的可拖动元素

Draggable elements with connectors in jsPlumb

javascript

jquery

jsplumb