jsPlumb

使用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;    
}    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值