Question

我想用可拖动的元素实现一个映射应用程序。我使用了以下代码，但是当设置了draggable时，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 draggable允许div可拖动但随后锚点变得分离。

所以这两个选项是

使用 $（“。dr”）。draggable（）并找到一种方法将锚点绑定到div
在 jsPlumb.draggable（）

或者我的方法完全错了？

UPDATE：我在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中带有连接器的可拖动元素

1 个答案: