jsPlumb拖動元素位置

使用jsPlumb使用jQuery

我想知道如果有一種方式來獲得一個元素的位置，而並拖動後的容器內降了嗎？

即時正在做的交叉工作，，但不會重新繪製我的連接點和錨點之前我保存位置。

<script type='text/javascript'> 
$(window).load(function(){ 
    $('#flowchartdrag".$id_kurs."').draggable({ 
     drag: function() { 
      var parentLeft = $('#flexwrap".$dynamiccounter."').position().left; 
      var parentTop = $('#flexwrap".$dynamiccounter."').position().top; 
      var offset = $(this).position(); 
      var xPos = (offset.left - parentLeft); 
      var yPos = (offset.top - parentTop); 
      $('#x".$id_kurs."').val(xPos); 
      $('#y".$id_kurs."').val(yPos); 

     }, 
     stop: function(event, ui) { 
      // Show dropped position. 
      var parentLeft = $('#flexwrap".$dynamiccounter."').position().left; 
      var parentTop = $('#flexwrap".$dynamiccounter."').position().top; 
      var Stoppos = $(this).position(); 
      var left = (Stoppos.left - parentLeft); 
      var top = (Stoppos.top - parentTop); 
      $('#x".$id_kurs."').val(left); 
      $('#y".$id_kurs."').val(top); 
     }, 
     containment: $('#flexwrap".$dynamiccounter."') 
    }); 
});

我tryed使用

jsPlumb.repaint;

但那不是工作

這是我怎麼會創建可拖動的元素與jsPlumb

instance'.$dynamiccounter.'.draggable(jsPlumb.getSelector("#flexcontent'.$dynamiccounter.' .dragable"));

卻怎麼也一世將x/y座標設置爲元素文本字段以將位置保存到數據庫中？

來源

2014-09-23 xQp

你確定的選擇是正確的？ '$（'＃flexwrap「。$ dynamiccounter。」'）' - dot是一個php連接運算符。 – 2014-09-23 18:33:08

現在你說，肯定它必須是+，但是它的工作idk：/但那不是我有的問題，但thx;） – xQp 2014-09-24 07:37:17

：D當然是正確的，因爲整個腳本通過回聲設置所以確保它必須。總忘了 – xQp 2014-09-24 07:52:13

你可以在你需要重新繪製元件的連接同時獲得DIV的從jQuery的拖放功能的位置被拖動爲：

$('SELECTOR').draggable({ 
    containment: $('PARENT_SELECTOR'), 
    drag:function(e){ 
     // Your code comes here 
     jsPlumb.repaint($(this)); // Note that it will only repaint the dragged element 
    }, 
    stop: function(e){ 
     // Your code for capturing dragged element position. 
    } 
})

更新JSFIDDLE

注：上面的代碼將只重繪拖動的元素。如果拖動元素的子元素也有連接，那麼它不會爲他們工作。

來源

2014-10-01 03:59:27 MrNobody

只需一個注意：如果我們指定 'jsPlumb.Defaults.Container = wrapper元素'，它會爲有連接而不是'repaint'，我們在'drag'回調中調用'repaintEverything'函數。 – Ashot 2016-11-23 06:46:42

#Mr沒有人非常感謝 – 2018-01-30 06:42:11

您可以添加jQueryUI的可拖動到你的jsPlumb元素這樣的：

instance'.$dynamiccounter.'.draggable(jsPlumb.getSelector("#flexcontent'.$dynamiccounter.' .dragable"), { 
     drag: function() { 
     var parentLeft = $('#flexwrap".$dynamiccounter."').position().left; 
     var parentTop = $('#flexwrap".$dynamiccounter."').position().top; 
     var offset = $(this).position(); 
     var xPos = (offset.left - parentLeft); 
     var yPos = (offset.top - parentTop); 
     $('#x".$id_kurs."').val(xPos); 
     $('#y".$id_kurs."').val(yPos); 
    }, 
    stop: function(event, ui) { 
     // Show dropped position. 
     var parentLeft = $('#flexwrap".$dynamiccounter."').position().left; 
     var parentTop = $('#flexwrap".$dynamiccounter."').position().top; 
     var Stoppos = $(this).position(); 
     var left = (Stoppos.left - parentLeft); 
     var top = (Stoppos.top - parentTop); 
     $('#x".$id_kurs."').val(left); 
     $('#y".$id_kurs."').val(top); 
    }, 
    containment: $('#flexwrap".$dynamiccounter."') 
});

的jsPlumb.draggable第二個參數是通過傳遞給jQueryUI的拖動。所以在這裏拖動功能不需要jsPlumb.repaint。

來源

2015-03-15 15:54:53 alemv

就像Alemv的回答，但不特定的（工作的所有情況），並使用jPlumb的演示：

jsPlumb.ready(function() { 
    //.... 
    instance.batch(function() { 
     //... 
     divsWithWindowClass = jsPlumb.getSelector(".window"); 

     //... 
     instance.draggable(divsWithWindowClass, { 
      drag: function() { 
       // Your code 
      }, 
      stop: function(event, ui) { 
       // Your code 
      } 
     }); 

    }); 
});

來源

2015-05-27 14:59:21 Uriel

好的答案，只使用jsPlumb（現在可以在沒有jQuery的情況下工作）。拖動被多次調用，在拖動操作過程中，停止被調用，當然，在放下時。參考：https：//jsplumbtoolkit.com/community/doc/dragging.html – PhiLho 2016-02-17 12:32:39

更相關的鏈接（包括在上面的鏈接頁面，或多或少）：https：//github.com/jsplumb/katavorio/wiki - 有也是一個啓動處理程序。 – PhiLho 2016-02-17 13:09:31

jsPlumb拖動元素位置

回答

相關問題