Draggable Div 只能拖动一次答案

【问题标题】：Draggable Div only draggable one timeDraggable Div 只能拖动一次
【发布时间】：2020-06-25 14:34:33
【问题描述】：

我正在尝试将列表中的 div 复制到图像上，以便将 div 合并到图像中。拖放工作良好，除非将 div 拖到 droppabled 后不能再次拖动。在示例中，我需要能够将“Patient Name”多次拖动到 droppable。任何帮助是极大的赞赏！这是代码：

 <!DOCTYPE html>
<html>
<head>
    <style>
        .draggable {
            width: 250px;
            height: 20px;
            background: #fff;
            padding: 10px;
            border: 1px solid black;
            margin: 5px;
        }

        .draggable:hover {
            cursor: pointer;
        }

        .droppable {
            border: 1px solid black;
            width: 600px;
            height: 800px;
            background: lightgrey;
            margin: 5px;
        }

        .table {
            display: table;
        }

        .tableRow {
            display: table-row;
        }

        .tableCol {
            display: table-cell;
            vertical-align: top;
        }

        .leftCol {
        }

        .rightCol {
        }

    </style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="table">
    <div class="tableRow">
        <div class="tableCol leftCol">

            <div>
                <img src="sample-1.jpg" class="droppable" style="width: 600px"><br>
                <img src="sample-2.jpg" class="droppable" style="width: 600px">
            </div>
        </div>
        <div class="tableCol rightCol">
            <div class="draggable">Patient Name</div>
            <div class="draggable">Owner Name</div>
            <div class="draggable">Owner Address</div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $('.draggable').draggable({
        revert: "invalid",
        stack: ".draggable",
        helper: function (e, ui) {
            return $(this).clone();
        },
        stop: function (e, ui) {
            $('.draggable').draggable().data()["ui-draggable"].cancelHelperRemoval = true;
        },
    });
    $('.droppable').droppable({
        accept: ".draggable",
        drop: function (event, ui) {
            var droppable = $(this);
            var draggable = ui.draggable;
            var newClone = $(ui.helper).clone();

            newClone.draggable();
            $(this).append(newClone);

        },
    });
</script>
</body>
</html>

here is a fiddle

【问题讨论】：

标签： jquery html jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

在运行代码时始终检查调试器。

这一行

$('.draggable').draggable().data()["ui-draggable"].cancelHelperRemoval = true;

报错

未捕获的类型错误：无法设置未定义的属性“cancelHelperRemoval”

改成

$(this).data("ui-draggable").cancelHelperRemoval = true;

并且您的代码按预期工作

更新小提琴：https://jsfiddle.net/jdr186fa/

【讨论】：