jsPlumb（4）-元素拖放

2019年8月27日 154次阅读 来源: chezhe

运用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;    
}
    原文作者：chezhe
    原文地址: https://segmentfault.com/a/1190000003826485
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞