Search code examples
javascriptjquerydraggabledroppablejsplumb

jsPlumb- Drag a clone without replication

I'm trying to drag an object (a simple image) onto the canvas from the toolbox. But once I move/ drag the object I dropped on the canvas it seems to create another clone of itself. But what I need is to simply be able to drop the object onto the canvas multiple times and have the possibility to move the object within the canvas without creating replicates of that object every time I drag it within the canvas. Here's my code:

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

Solution

  • I've solved it and here's the final code. I had to remove the helper since jsPlumb doesn't support jQuery. And also add a class to the dropped element which provides the same style but stays safe from inheriting the same functionality as the ctoolbox element.

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