CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-draggablejquery-ui-droppable
Ashkan Mobayen Khiabani
Ashkan Mobayen Khiabani

Reputation: 34180

Detect unacceptable drag drop in jQuery-ui droppable

I'm using jQuery-ui draggable, droppable. My main container should only accept plugin-containers which also are droppables which accept plugins. Below is the code my code snippet:

$("#main").droppable({
                activeClass: "ui-state-default",
                hoverClass: "ui-state-hover",
                accept: ".plugin-container",
                drop: function( event, ui ) {
                    $( this ).find( ".placeholder" ).remove();
                    $("<div></div>").html(ui.draggable.html()).appendTo(this).droppable({ accept: '.plugin', drop: function (event, ui) { $('<div></div>').html(ui.draggable.html()).appendTo(this); } }).sortable();
                }

});

The problem is that when a plugin is dragged into the main container, I want to:

  1. Hightlight Plugin containers that plugin can be dropped
  2. If plugin is dropped in the main container show an error message

but the droppable over and drop methods only fire if the dragged item is acceptable and won't fire for unacceptable drags (in this case .plugin). what can I do here?

Here is the fiddle

Upvotes: 2

Views: 1706

Answers (2)

Rahul Gupta
Rahul Gupta

Reputation: 10161

I think I have found THE EXACT SOLUTION TO YOUR PROBLEM !!

Check out this FIDDLE

CODE:

$("#main").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",

    //accept: ".plugin-container",
    drop: function( event, ui ) {

        if(ui.draggable.hasClass('plugin'))
        {
            alert('This element cannot be dropped here !');
            $(ui.draggable).draggable({ revert: true });
        }   
        else if(ui.draggable.hasClass('plugin-container'))
        {
            //console.log('context = ');
            //console.log(ui.draggable.context);

            $( this ).find( ".placeholder" ).remove();
            $("<div></div>").addClass('plugin-container')
            .html(ui.draggable.html())
            .appendTo(this)
            .droppable({ 
                accept: '.plugin',
                greedy:true,//this will prevent the parent droppables from receiving the droppable object
                drop: function (event, ui) { 
                    $(ui.draggable).draggable({ revert: false });
                    $('<div></div>')
                    .addClass('plugin')
                    .html(ui.draggable.html())
                    .appendTo(this); 
                } 
            }).sortable();
        }
    }

});

$(".menu div").draggable({
     appendTo: "body",
     helper: "clone"
});

Upvotes: 2

Husman
Husman

Reputation: 6909

You can make all draggabbles acceptable and then in your over and drop methods filter the wanted/unwanted divs and show error message.

drop: function( event, ui ) {
var dropped = ui.draggable.attr('class');
if (dropped == ".plugin") {
  // show alert
} else {

}

There is also the 'revert' option that you can use to revert a dragged element back to its original position.

Upvotes: 1

Related Questions