jsPlumb（4）-元素拖放

Lowky 发布于2019-08-21 10:42 / 1908人阅读

摘要：使用的一个普通的特性就是元素的拖放。拖拽内嵌元素拖拽多个元素拖拽时文本选中浏览器默认的拖拽行为是选择里的元素。废止了这种行为，没有。为了支持这种情况，被拖拽元素都增加了这个类。在拖拽结束后被去除。

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

GPU云服务器云服务器 jsplumb jsplumb库使用拖放鼠标拖放

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86039.html

jsPlumb（3）-基本概念

摘要：介绍是用来连接元素的，所以核心是，其中又分为以下四个概念一个和某个相关元素的位置。有四种类型贝塞尔曲线直线流程图状态机。一个由两个一个，可有可无。每个有一个关联的。的公共只有和，创建和配置。但是你需要熟悉其内部的的概念。介绍 jsPlumb是用来连接元素的，所以核心是Connection，其中又分为以下四个概念： Anchor 一个和某个相关元素的位置。你不能创建它们，非可视化，只...

tulayang 2019-08-21 10:42 评论0 收藏0
jsPlumb（1） - 开始使用

摘要：社区版本为开发者在他们的网页上提供可视化的元素连接。在现代的浏览器使用，在和以下版本使用。建议用户自己设置。到目前为止，一个在每个终点都有，在中间有一个标签，添加四个元素，实际添加的元素取决于渲染器使用的是还是。 jsPlumb jsPlumb社区版本为开发者在他们的网页上提供可视化的元素连接。在现代的浏览器使用SVG，在IE8和以下版本使用VML。 jsPlumb没有额外的依赖。 ...

LoftySoul 2019-08-21 10:42 评论0 收藏0
记一次绘图框架技术选型: jsPlumb VS mxGraph

摘要：公司项目需要用到绘图框架，绘图部分以前是另一位同事负责，用的是框架。基于以上提及到的种种原因，上年年末我做起了技术调研，希望能找到一个合适我们项目的绘图框架。兼容性问题项目对浏览器兼容性比较宽松，浏览器兼容性问题不在考虑范围之内。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

longmon 2019-08-23 15:36 评论0 收藏0
记一次绘图框架技术选型: jsPlumb VS mxGraph

摘要：公司项目需要用到绘图框架，绘图部分以前是另一位同事负责，用的是框架。基于以上提及到的种种原因，上年年末我做起了技术调研，希望能找到一个合适我们项目的绘图框架。兼容性问题项目对浏览器兼容性比较宽松，浏览器兼容性问题不在考虑范围之内。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

channg 2019-08-02 14:23 评论0 收藏0
jsplumb+dragable+vue(一)

摘要：基于的，支持拖拽生成节点，节点双击展示更多信息，节点连线，删除节点，删除连线，重绘连接图，当前页面刷新连接图，根据画连接图等功能本章主要讲拖拽生成节点获取链接图的信息引入需要的文件因为要用所以引入了画连接图用因为用的所以这样引入拖基于vue的jsplumb，支持拖拽生成节点，节点双击展示更多信息，节点连线，删除节点，删除连线，重绘连接图，当前页面刷新连接图，根据json画连接图等功能...

Imfan 2019-08-02 16:03 评论0 收藏0