DOM 对象不可使用 jsPlumb Community Edition (6.2.10) 进行拖动

Question

我正在使用 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>

这两个框都不可拖动：在控制台中，我得到答案：“该框可拖动吗？ false”，当我尝试拖动时，其中一个将不起作用。根据文档：https://docs.jsplumbtoolkit.com/community/6.x/lib/dragging在jsPlumb 5.x/6.x中，默认情况下所有元素都是可拖动的 - 无需调用draggable功能与以前的版本一样。

Answer 1

所以我向我想要拖动的框添加了一些不可见的端点，并且框变得可拖动。不知道发生了什么。