jsplumb перетаскиваемый не работает.

Я не могу понять, почему мой jsplumb не работает. Я создал очень простой пример sippet (прикреплен к этому сообщению).

jsPlumb.ready(function() {

  jsPlumb.draggable($('.square'))

  jsPlumb.connect({
    source: "element1",
    target: "element2"
  });

});
.square {
  background-color: red;
  width: 50px;
  height: 50px;
  position: absolute;
}
<body>
  <h1>Hello World!</h1>

  <div id="element1" class="square"></div>
  <div id="element2" class="square" style="left:300px"></div>


  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="jsplumb@*" data-semver="1.7.2" src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>

</body>

Я установил свое позиционирование в css на абсолютное, но я в тупике, почему я не могу заставить его работать. Я сравнивал его с рабочими примерами и безуспешно читал документацию.

Я был бы очень признателен за любую помощь в этом.

Где я ошибаюсь?


jsplumb draggable
person K-Dawg    schedule 10.06.2015    source источник
comment
Не уверен, что не так, но если я использую последнюю версию jsPlumb: jsplumbtoolkit. com/lib/jsPlumb-2.0.7-min.js ваш фрагмент кода просто работает...   -  person PhiLho    schedule 26.02.2016

Ответы (2)


arrow_upward
1
arrow_downward

попробуйте использовать

elementsList = jsPlumb.getSelector('.square'); jsPlumb.draggable (список элементов);

иначе напрямую дайте элементы jsPlumb.draggable($('#element1')); jsPlumb.draggable($('#element2'));

person Prasanna Grande    schedule 11.06.2015
comment
Ах нет, я понимаю, что вы имеете в виду... с идентификаторами... да, я тоже пробовал. - person K-Dawg; 12.06.2015

arrow_upward
0
arrow_downward

Вообще говоря, такие функции анимации реализованы в jquery-ui, а не в ядре jquery. http://jqueryui.com/draggable/

Я думаю, что в этой ранней версии jsPlumb.js операция Draggable зависит от jquery-ui.

Попробуйте добавить в свой код библиотеку jquery-ui. Я добавил это в ваш код, и это сработало;

<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
person mokarakaya    schedule 05.06.2016