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

Post a Comment

Popular posts from this blog

Creating connections between Elements in jsPlumb

In my previous posts we've gone through creating a toolbox and canvas from which elements can be dragged from and dropped onto. Then we took a look at eliminating the replication of elements whenever a dropped clone was dragged within the canvas. So now let's move onto creating basic connections between these dropped elements using jsPlumb and jQuery-UI. Starting off with the code previously dealt with, creating connections requires only the addition of a few lines of code to your JS code. The droppable function part of the code has been shown below. Step 1: Assign a unique ID for each element being dropped on the canvas. Though jsPlumb will automatically assign an ID when you don't supply one, it is easier to manipulate the elements when you define an ID. This ID can be a simple digit or even a complex string( But remember, jsPlumb treats all IDs as strings). //Set a unique ID for each dropped Element var indexer = 0 ; function setId (element){ indexer ++;
Read more

AngularJS vs ReactJS

Image
Today I just came across an interesting question and thought of creating this. At many occasions, developers try to render ReactJS as the best over AngularJS. But, according to my personal opinion, this is purely opinionated and also strongly depends on the type of the project in context. First of all, here's a very brief definition of what AngularJS & ReactJS according to their documentations. AngularJS AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write." Here's a perfect example to try out this. ReactJS   React.js is a JavaScript library for building user interfaces. (Famously used by Facebook) The comparison between the two has been jotted out in the following table
Read more

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 : 72 px ; height : 80 px ; 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 drop
Read more