jsPlumb Community Edition 6.2.10中DOM元素无法拖拽问题求助

我使用jsPlumb Community Edition 6.2.10开发时遇到拖拽失效问题，代码如下：

<script src="~/lib/jsplumb/v6/js/jsplumb.browser-ui.umd.js" asp-append-version="true"></script>

<div id="panel" style="border: 1px solid #ccc; position: relative; width: 25%; ">
    <div id="mybox" style="width: 100px; height: 100px; background-color: red; position: abolute; top: 50px; left: 50px;"></div>
</div>

<script>
    jsPlumb.ready(() => {

        // Intialize jsPlumb
        const instance = jsPlumb.newInstance({
            container: document.getElementById('panel')
        });

        // Check if box declared in html is draggable: Answer is NO!
        const mybox = document.getElementById('mybox');
        console.log('Is the box draggable?', mybox.draggable); 

        // Create a new box
        const leftPanel = document.getElementById('panel');
        const box = document.createElement('div');
        box.classList.add('box');
        box.style.position = 'absolute'; 
        box.style.top = `200px`;
        box.style.left = `20px`;
        leftPanel.appendChild(box);

        // Check if the added box is draggable: Answer is NO!
        console.log('Is the box draggable?', box.draggable);
    });
</script>

<style>
.box {
    width: 120px;
    height: 60px;
    background-color: lightblue;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>

问题现象 #

两个盒子均无法拖拽，控制台输出Is the box draggable? false，实际拖拽操作无效。根据官方文档说明，jsPlumb 5.x/6.x版本中所有元素默认可拖拽，无需像旧版本那样调用draggable函数，但当前场景未生效。

问题原因及解决方案 #

1. 定位属性拼写错误：第一个盒子的position属性拼写为abolute，正确应为absolute。错误的定位属性会导致jsPlumb无法正确计算拖拽时的元素位置，修正后才能保证拖拽逻辑正常运行。

2. 未将元素注册到jsPlumb实例：虽然文档提到“默认所有元素可拖拽”，但实际是指jsPlumb管理的元素默认支持拖拽。你需要显式调用makeDraggable方法，将需要拖拽的元素注册到实例中，让jsPlumb为其绑定拖拽事件：

修改后的脚本代码如下：

jsPlumb.ready(() => {

    // Intialize jsPlumb
    const instance = jsPlumb.newInstance({
        container: document.getElementById('panel')
    });

    // 修正拼写错误后，注册第一个盒子
    const mybox = document.getElementById('mybox');
    instance.makeDraggable(mybox);
    console.log('Is the box draggable?', mybox.draggable); 

    // Create a new box
    const leftPanel = document.getElementById('panel');
    const box = document.createElement('div');
    box.classList.add('box');
    box.style.position = 'absolute'; 
    box.style.top = `200px`;
    box.style.left = `20px`;
    leftPanel.appendChild(box);

    // 注册新创建的盒子
    instance.makeDraggable(box);
    console.log('Is the box draggable?', box.draggable);
});

同时修正第一个盒子的HTML代码：

<div id="mybox" style="width: 100px; height: 100px; background-color: red; position: absolute; top: 50px; left: 50px;"></div>

完成以上修改后，两个盒子即可正常拖拽。

内容的提问来源于stack exchange，提问作者Radu M.