jsPlumb - Drag and Drop Multiple Elements

Hi there,
We've discussed the jsPlumb facility to Drag and drop objects in my previous post. 
Here I've jotted out the way to manipulate the elements dropped onto a canvas without creating replicates of itself.

In order to do so, firstly create an additional class definition in your CSS file or simply add the following to the <style> segment in the in the <head> section of your view.

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

    background-image: url("../dist/img/bigdot.png");
}
 
The next and the final step is to squeeze in a few lines of code to your JS file.
Within the droppable function, first we create the clone of the tool/ image as discussed in this
context, as the 'droppedElement'. Then we add these following lines of code.
 
Since  jsPlumb does not provide support for jQuery, the ui.helper class needs ti be removed.
By adding the class "ch" to the droppedElement, we instuct it to inherit its style but restrain from 
acquiring its functionality which prohibits the droppedElement from replicating every time it is 
being dragged and dropped within the canvas itself.
 
 ui.helper.remove();
$(droppedElement).removeAttr("class");
jsPlumb.repaint(ui.helper);
$(droppedElement).addClass("ch"); 

So the entire code for this function is as follows. Remember to include the correct path of the
source files and scripts according to your project structure.

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

Comments

Popular posts from this blog

jsPlumb - Dragging a Clone

A pristine Pattern Matching method in Javascript

OSGi Framework