Drag and Drop a variety of Elements in jsPlumb

I am working with jsPlumb and am trying to create a simple toolbox of 2 elements. These elements need to be dragged and dropped onto the canvas where further action such as creating connections in between them and deleting them can be performed. But for now, I've been able to accept 2 div under the droppable method. Depending on the accepted div, the class to be added and the fields to be appended to the element change. The working version of the following code: https://github.com/NayantaraJeyaraj/MultipleElements

$(".project").draggable
    ({
        helper : 'clone',
        cursor : 'pointer',
        tolerance : 'fit',
        revert : true

    });
    $(".query").draggable
    ({
        helper : 'clone',
        cursor : 'pointer',
        tolerance : 'fit',
        revert : true

    });

And the droppable method:

$("#container").droppable
    ({
        accept: '.project, .query',
        containment: 'container',

        drop: function (e, ui) {
            droppedElement = ui.helper.clone();
            ui.helper.remove();
            $(droppedElement).removeAttr("class");
            jsPlumb.repaint(ui.helper);

            var newAgent = $('<div>').attr('id', 'pro' + i).addClass('pro');
            newAgent.text('Element ' + i);
            $(droppedElement).draggable({containment: "container"});
            $('#container').append(newAgent);

            jsPlumb.draggable(newAgent, {
                containment: 'parent'
            });
            newAgent.dblclick(function(e) {

                jsPlumb.detachAllConnections(newAgent.attr('id'));
                jsPlumb.removeAllEndpoints($(this));
                jsPlumb.detach($(this));
                $(newAgent).remove();
            });
            i++;
        }
    });

What I need this piece of code to do is, to add the "pro" class to the newAgent( as shown in the code) when the accepted div is '.project' else if the accepted div is '.query' it needs to add the "que" class instead of the pro class. But here, currently it adds the pro class for both instances. How ca I detect which is being accepted and then add the class accordingly?

Solution

I worked a long with jsplumb for my project and i think you can take a look at this codepen :- http://codepen.io/soniabhishek/pen/XjNYGp?editors=1010

//This is specific function when drop occurs
jsPlumb.draggable(c1_1,{
  stop: function(params){
    console.log("dropped", params)
  }

});

Here i have some basic example of drag drop, multi select, as well as group concepts.

And in particular look for stop function which you particularly looking for.

Thanks.