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

Я хочу реализовать картографическое приложение с перетаскиваемыми элементами. Я использовал следующий код, но когда установлено перетаскивание, элемент 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 позволяет перетаскивать div, но тогда привязки становятся отсоединенными.

Итак, два варианта

  1. Используйте $(.dr).draggable() и найдите способ привязать якоря к div
  2. Сделайте div перетаскиваемым в jsPlumb.draggable()

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

ОБНОВЛЕНИЕ: я установил позицию CSS как абсолютную в div, и теперь div можно перетаскивать, но привязка по-прежнему ошибочна.


javascript jquery jsplumb
person S.Dan    schedule 22.08.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы пропустили вызов 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);

});

Обновлен скрипт

person Sandeep Nayak    schedule 22.08.2016
comment
Если я хочу добавить ту же функциональность для динамически создаваемых элементов (скажем, новые элементы добавляются, когда пользователь нажимает кнопку), мне придется вызывать функцию перерисовки? - person S.Dan; 22.08.2016
comment
Да... вы можете дать тот же класс вновь созданному элементу... это также должно позаботиться о перерисовке - person Sandeep Nayak; 22.08.2016