jsPlumb - Dragging a Clone

I've been playing with jsPlumb lately and exploring its features constrained to dragging and dropping objects from a palette onto the canvas.
The physical structure of the interface is supposed to have a toolbox( which at present is merely a single image) and a scroll-able canvas onto which the image will be dropped . 
Here a user will be permitted to perform multiple drag and drops from the toolbox(image) but the back flow of a dropped element on to the toolbox or outside the canvas is restrained. 
Also, the dropped element can be manipulated within the canvas. In this case, starting off with the basics, manipulation of the element deals with only moving the element within the canvas to change its position. But, for further addition of features, manipulation of dropped elements can include re-sizing, adding connectors, property modification via a property console, etc. 
The limitation that I came across in this particular piece of code is the self cloning/ replication of the dropped element every time I tried to move the dropped element. So though the droppable class allows the free movement of the clone an unwanted replica of the element is created alongside the intended element.

ref: This issue has been solved. Refer my following blog post
 



<!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');
                   
                }

            });

        });

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

Comments

Popular posts from this blog

A pristine Pattern Matching method in Javascript

Creating Multi dimensional Arrays in Javascript