CODEWITHSUNDEEP
jqueryhtmljquery-ui-draggablejquery-ui-droppable
Little bird
Little bird

Reputation: 1088

dragging same element li of div second time should not be drag and drop

When dragging and dropping an element from <div id="catalog" > to a box i.e <div id="dialogIteration"> works fine .But when the same element is dragged and dropped for the second time , its easily get dropped But What i want that It should not be dropped and give alert that "Statement already exits" .

Example code http://jsfiddle.net/coolanuj/7683X/28

Upvotes: 0

Views: 1265

Answers (2)

sdespont
sdespont

Reputation: 14025

Here is an example : http://jsfiddle.net/7683X/35/

I used :contains selector to check if the text has already been dropped into the droppable element :

drop: function(event, ui) {
    if($("#dialogIteration ol:contains('"+ui.draggable.text()+"')").length > 0)
    {
       alert("Statement already exits");
       return false;
    }

    ...
}

Upvotes: 0

Konstantin Dinev
Konstantin Dinev

Reputation: 34895

Use a flag inside your draggable which would indicate whether it has already been dropped inside your dialog.

drop: function (evt, ui) {
    // logic
    if (ui.draggable.attr('data-dropped')) {
        // don't perform the drop
    } else {
        // perform the drop
        ui.draggable.attr('data-dropped', true);
    }
}

If you want only the one that is currently being dropped to not be droppable anymore then reset the draggable attribute upon successful drop.

drop: function (evt, ui) {
    // logic
    if (ui.draggable.attr('data-dropped')) {
        // don't perform the drop
    } else {
        // perform the drop
        $('tag[data-dropped=true]').attr('data-dropped', false);
        ui.draggable.attr('data-dropped', true);
    }
}

Upvotes: 2

Related Questions