Невозможно сделать дивы перетаскивать с jsPlumb

есть: JQuery 2.1.3, хромНевозможно сделать дивы перетаскивать с jsPlumb

следующий код отображают 2 див, соедините их (так jsPlumb делает работу), но дивы не являются перетаскиваемыми.

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style> 
     .drag-me { 
      width: 230px; 
      height: 250px; 
      margin: 15px; 

      background-color: #29e; 
      color: white; 

      border-radius: 1em; 
      padding: 20px; 

      -webkit-transform: translate(0px, 0px); 
      transform: translate(0px, 0px); 
     } 

     .drag-me::before { 
      content: "#" attr(id); 
      font-weight: bold; 
     } 

     .tg {border-collapse:collapse;border-spacing:0;border-color:white;margin:0px auto;} 
     .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#aabcfe;color:#669;background-color:#e8edff;border-top-width:1px;border-bottom-width:1px;} 
     .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#aabcfe;color:#039;background-color:#b9c9fe;border-top-width:1px;border-bottom-width:1px;} 


    </style> 
</head> 
<body> 

<div class="drag-me" id="draggable1"></div> 
<div class="drag-me" id="draggable2"></div> 



</body> 
<script src="bower_components/jquery/dist/jquery.js"></script> 
<script src="bower_components/jsPlumb/dist/js/jquery.jsPlumb-1.7.4.js"></script> 

<script> 

    jsPlumb.ready(function() { 
     jsPlumb.draggable($("#draggable1")); 
     jsPlumb.draggable($("#draggable2")); 
     jsPlumb.connect({source:"draggable1", target:"draggable2"}); 

    }); 


</script> 
</html>

источник

2015-03-28 DmitrySemenov

1. Required Imports:

JQuery UI 1.7.x или выше (если вы хотите, чтобы поддержать перетаскивание). Всегда помните, что совместимы версии jQuery и jQuery UI, которые вы используете.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 
<script src="PATH_TO/jquery.jsPlumb-1.7.4-min.js"></script>

2. Required CSS:

Вы должны установить position:absolute на элементы, которые вы собираетесь быть перетаскивать. Причиной этого является то, что все библиотеки реализуют перетаскивание, манипулируя свойствами left и top атрибута элемента style.

.drag-me { 
    position: absolute; 
    width: 230px; 
    ... 
}

источник

2015-03-28 18:20:58 alemv

Невозможно сделать дивы перетаскивать с jsPlumb

ответ

Смежные вопросы