[SOLVED] Draggable Div only draggable one time

Draggable Div only draggable one time

I'm trying to copy divs from a list over an image so the divs can be incorporated into the image. The drag and drop are working good except once the divs are dragged to the droppabled they cannot be dragged again. In the example I need to be able to drag "Patient Name" several times to the droppable. Any Help is greatly appreciated! This is the code:

 <!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

Solution

Always check the debugger when you run your code.

This line

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

is giving error

Uncaught TypeError: Cannot set property 'cancelHelperRemoval' of undefined

change it to

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

and your code works as expected

Updated fiddle: https://jsfiddle.net/jdr186fa/