jsplumb draggable
时间: 2023-11-14 20:12:06 浏览: 33
根据提供的引用内容,可以得知jsplumb draggable是一个基于jsPlumb插件的拖拽组件,可以通过安装vuedraggable插件来使用。同时,easy-flow是一个基于VUE+ElementUI+JsPlumb的流程设计器,通过vuedraggable插件来实现节点拖拽,支持给定数据加载流程图,支持画布拖拽,支持连线样式、锚点、类型自定义覆盖等功能。因此,jsplumb draggable可以用于实现easy-flow这样的流程设计器的拖拽功能。
相关问题
jsplumb.draggable
jsPlumb中的draggable()方法用于使一个节点可以自由拖动。使用该方法,需要传入节点的id作为参数。例如,在以下代码中,我们可以看到使用jsPlumb.draggable('item_left')的示例:
<div id="diagramContainer">
<div id="item_left" class="item"></div>
<div id="item_right" class="item" style="left:150px;"></div>
</div>
<script>
jsPlumb.draggable('item_left');
</script>
在这个例子中,item_left元素可以被拖动。
要让元素可拖动,还需要设置其他一些选项,例如拖动范围和停止拖动时的操作。通过设置配置对象,可以传递更多选项参数。下面是一个示例,展示了如何使用jsPlumb.draggable()方法设置元素的拖动功能,并在停止拖动时更新节点的位置:
function addDraggable(id) {
jsPlumb.draggable(id, {
containment: 'parent',
stop: function(event, ui) {
let dragNodeId = event.target.id;
let dragNode = flowData.stepMap[dragNodeId];
dragNode.top = ui.position.top;
dragNode.left = ui.position.left;
updateFlag = true;
}
})
}
通过调用addDraggable()函数,可以启用元素的拖动功能。
另外,为了添加入口点和出口点,需要进行一些额外的设置。以下是添加节点并设置入口点和出口点的示例代码:
function initSetNode(template, position) {
addDraggable(position.id);
setEnterPoint(position.id);
setExitPoint(position.id);
}
// 设置入口点
function setEnterPoint(id) {
let config = getBaseNodeConfig();
config.isSource = true;
config.maxConnections = -1;
config.allowLoopback = false;
jsPlumb.addEndpoint(id, {
anchor: 'AutoDefault',
uuid: id + '-in'
}, config);
}
// 设置出口点
function setExitPoint(id, position) {
let config = getBaseNodeConfig();
config.isTarget = true;
config.maxConnections = -1;
config.allowLoopback = false;
jsPlumb.addEndpoint(id, {
anchor: position || 'Bottom',
uuid: id + '-out'
}, config);
}
在以上代码中,initSetNode()函数用于初始化节点并设置入口点和出口点。setEnterPoint()函数用于设置入口点,setExitPoint()函数用于设置出口点。
jsplumb vuedraggable
引用和中提到了JSPlumb和VueDraggable。JSPlumb是一个用于在Web应用程序中创建可连接的、可拖拽的图形的JavaScript库。它提供了一种简单的方式来创建流程图、关系图和其他交互式图形。JSPlumb允许你将元素连接起来,使它们能够在页面上移动和重新排列。VueDraggable是一个Vue.js的插件,它提供了一种简单的方式来实现元素的拖拽功能。
简单来说,JSPlumb可以用于创建图形并将其连接起来,而VueDraggable可以用于对Vue组件进行拖拽操作。
<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue+draggable +jsPlumb 表格数据连线](https://blog.csdn.net/m0_51113907/article/details/127774633)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [基于VUE+ElementUI+JsPlumb的流程设计器,通过 vuedraggable 插件来实现节点拖拽](https://download.csdn.net/download/qq_41701956/87950533)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]