javascript - Detect unacceptable drag drop in jQuery-ui droppable -
javascript - Detect unacceptable drag drop in jQuery-ui droppable -
i'm using jquery-ui draggable, droppable. main container should take plugin-containers droppables take plugins:
$("#main").droppable({ activeclass: "ui-state-default", hoverclass: "ui-state-hover", accept: ".plugin-container", drop: function( event, ui ) { $( ).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 when plugin dragged main container, want to:
hightlight plugin containers plugin can dropped if plugin dropped in main container show error messagebut droppable over , drop methods fire if dragged item acceptable , won't fire unacceptable drags (in case .plugin). can here?
here fiddle
i think have found the exact solution problem !!
check out 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 dropped here !'); $(ui.draggable).draggable({ revert: true }); } else if(ui.draggable.hasclass('plugin-container')) { //console.log('context = '); //console.log(ui.draggable.context); $( ).find( ".placeholder" ).remove(); $("<div></div>").addclass('plugin-container') .html(ui.draggable.html()) .appendto(this) .droppable({ accept: '.plugin', greedy:true,//this prevent parent droppables receiving 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" });
javascript jquery jquery-ui jquery-plugins
Comments
Post a Comment