jsPlumb-拖动克隆而不进行复制

jsPlumb- Drag a clone without replication

本文关键字：复制拖动 jsPlumb- 更新时间：2023-09-26

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

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

我已经解决了它，下面是最后的代码。由于jsPlumb不支持jQuery，我不得不删除这个助手。还可以向已删除的元素添加一个类，该类提供相同的样式，但不会继承与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>