How to find previously dropped value from droppable div

Question

I am working on dynamic formula generator using jquery drag and drop functionlaity What i have done so far is

I have two 2 list

<ul id="head">
    <li class="horizontal">Salary</li>
    <li class="horizontal">Workers</li>
    <li class="horizontal">Perday</li>
</ul>

and

<ul id="operations">
    <li class="horizontal">Add +</li>
    <li class="horizontal">Sub -</li>
    <li class="horizontal">Multiply *</li>
    <li class="horizontal">Divide /</li>
</ul>

The process is user will first drag from first list and drop in droppable div and they will add anything from operations list like (+,- etc..). The Jquery i have used :

$('#head li').draggable({
    cursor: 'move',
    helper: 'clone',
    connectToSortable: "#drop",
});
$("#drop").droppable({
    drop: function (event, ui) {
        $(this)
            .removeClass("ui-droppable ui-sortable")
            .addClass("horizontal ui-draggable ui-draggable-handle")
    }
}).sortable();

droppable div

<div  id="drop" style="border:2px solid;min-height:100px;"></div>

My Problem is that i have to validate user should not drop more than one operations at a time. ex:Multiply * Add + this is wrong. The operations must come between 2 text. so how i can we find the previously added value in this droppable div (drop). Thanks in advance

score 0 · Answer 1 · answered Jul 04 '15 at 11:34

How about using some data attribiutes to id your operations and a variable in js to store what was dropped last, like this:

HTML

<div class='js-droppable' data-drop-type='op'>operation 1</div>

JS

var lastDropped = '';

var processDroppable = function () {
    var dropped = $(this).data('drop-type');

    if (lastDropped == 'op' && dropped == 'op') {
        console.log('not allowed')
    } else {
        console.log('you may drop ...');
    }

    lastDropped = dropped;
}

$('.js-droppable').click(processDroppable);

The data attribute stores the type of droppable and then is used to catch any duplicate droppable that is not allowed.

You could do any logic really based on identifying your droppables, but lastDropped == 'op' && dropped == 'op' covers the case in the question.

The working example is here in JSFiddle, I've used click events rather than dropped events, for simplicity; open the console to see the output.

Great example @tonileigh i can understand the approach with the button click and getting the values of dropped one. but i am the nodes from list view in div and finding the last dropped value inside the div the quite challenge. — Muthu SA, Jul 05 '15 at 08:42

How to find previously dropped value from droppable div

1 Answers1