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()函数用于设置出口点。