博客

使用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;    
}