jsPlumb- 无需复制即可拖动克隆

Question

我正在尝试将一个对象（一个简单的图像）从工具箱拖到 canvas 上。但是一旦我移动/拖动我放在 canvas 上的对象，它似乎会创建自己的另一个克隆。但我需要的是能够简单地将对象多次放到 canvas 上，并有可能在 canvas 内移动对象，而无需在每次将对象拖动到 canvas 内时创建该对象的副本canvas。这是我的代码：

<!doctype html>
<html>
<head>

    <script src="../lib/jquery.min.js"></script>
    <script src="../lib/jquery-ui.min.js"></script>
    <script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script>
    <!--script src="../dist/js/jsPlumb-2.1.1-min.js"></script-->

    <style>
        .ctoolbox{
            position: absolute;
            width: 72px;
            height: 80px;
            background-color: #0d78bc;
            background-image: url("../dist/img/bigdot.png");
            border: solid 3px red;
        }

        #dropArea{
            cursor: pointer;
            border: solid 1px gray;
            width: 800px;
            margin-left: 80px;
            height: 400px;
            position: relative;
            overflow-x: scroll;
            overflow-y: scroll;
        }

    </style>
</head>
<body>
    <div class="ctoolbox" id="cId">
    </div>
    <div id="dropArea"></div>

    <script>

        //Drag and drop works for multiple objects but manipulating those objects within the canvas doesn't.
        //Objects in the canvas are stagnant.
        jsPlumb.ready(function(e)
        {
            jsPlumb.setContainer($('#dropArea'));
            $(".ctoolbox").draggable
            ({
                helper : 'clone',
                cursor : 'pointer',
                tolerance : 'fit',
                revert : true

            });

            $("#dropArea").droppable
            ({
                accept : '.ctoolbox',
                containment : 'dropArea',

                drop : function (e, ui) {
                    droppedElement = ui.helper.clone();
                    $(droppedElement).draggable({containment: "dropArea"});   //Replicates everytime an object on the canvas is dragged.
                    droppedElement.appendTo('#dropArea');
                    droppedElement.click(divClicked);

                }

            });

            function divClicked(clickedElement)
            {
                jsPlumb.draggable(clickedElement, {
                    containment : 'parent',
                    stop : function (event)
                    {
                        alert("divClicked Called!");
                        stateDragged=true;
                        clickedElement.css('background-color ','blue');
                    }

                });
            }
        });

    </script>
</body>
</html>

Answer 1

我已经解决了，这是最终代码。由于 jsPlumb 不支持 jQuery，因此我不得不删除帮助程序。并且还向删除的元素添加一个 class，它提供相同的样式但不会继承与 ctoolbox 元素相同的功能。

<!doctype html>
<html>
<head>

    <script src="../lib/jquery.min.js"></script>
    <script src="../lib/jquery-ui.min.js"></script>
    <script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script>

    <style>
        .ctoolbox{
            position: absolute;
            width: 72px;
            height: 80px;
            background-image: url("../dist/img/bigdot.png");
            border: solid 3px red;
        }

        #dropArea{
            cursor: pointer;
            border: solid 1px gray;
            width: 800px;
            margin-left: 80px;
            height: 400px;
            position: relative;
            overflow-x: scroll;
            overflow-y: scroll;
        }

        .ch{
            position:absolute;
            cursor:pointer;
            width: 72px;
            height: 80px;

            background-image: url("../dist/img/bigdot.png");

        }

    </style>
</head>
<body>
<div class="ctoolbox" id="cId">
</div>
<div id="dropArea"></div>



<script>
    jsPlumb.ready(function(e)
    {
        jsPlumb.setContainer($('#dropArea'));
        $(".ctoolbox").draggable        ({
            helper : 'clone',
            cursor : 'pointer',
            tolerance : 'fit',
            revert : true
        });

        $("#dropArea").droppable        ({
            accept : '.ctoolbox',
            containment : 'dropArea',

            drop : function (e, ui) {
                droppedElement = ui.helper.clone();
                ui.helper.remove();
                $(droppedElement).removeAttr("class");
                jsPlumb.repaint(ui.helper);
                $(droppedElement).addClass("ch");
                $(droppedElement).draggable({containment:

                "dropArea"});
                droppedElement.appendTo('#dropArea');

            }

        });

     });

</script>
</body>
</html>

jsPlumb- 无需复制即可拖动克隆

jsPlumb- Drag a clone without replication

javascript

jquery

draggable

droppable

jsplumb