jsPlumb（4）-元素拖放

使用jsPlumb的一個普通的特性就是元素的拖放。方法以下：
myInstanceOfJsPlumb.draggable("elementId");

接受的參數類型

• 元素id的字符串

• 元素

• list類型對象，內容是元素或字符串
  舉個栗子

• 數組
  jsPlumbInstance.draggable(["elementOne", "elementTwo"]);

• jQuery選擇器
  jsPlumbInstance.draggable($(".someClass"));

• 節點列表

var els = document.querySelectorAll(".someClass");
jsPlumbInstance.draggable(els);

可選項

若是你真的不能使用 jsPlumb.draggable，那你就不得不經過jsPlumb.repaint手動處理。
jsPlumb是jsPlumbInstance類的一個實例。若是你使用本身的實例，確保你調用的是這些實例的拖放方法，而不是全局的。

若是你是用的是vanilla jsPlumb，它提供一個打包好的庫叫Katavorio——提供多種拖放方式。

須要的CSS

你必須把你要設置可拖放的元素設置爲position:absolute。

not finished

拖拽容器

使容器內的內容也能夠拖拽。

• jQuery：

jsPlumb.draggable($("someSelector"), {
  containment:"parent"
});

• Vanilla

jsPlumb.draggable("someElement", {
   containment:true
});

not finished

拖拽內嵌元素

not finished

拖拽多個元素

not finished

拖拽時文本選中

瀏覽器默認的拖拽行爲是選擇DOM裏的元素。jQuery廢止了這種行爲，vanilla jsPlumb沒有。爲了支持這種狀況，被拖拽元素都增長了_jsPlumb_drag_select這個類。

在拖拽結束後被去除。

內容以下：

._jsPlumb_drag_select * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
}