jquery - JQueryUI - droppable only one at a time -

i'm using jqueryui draggable , droppable.

if drop 1 element in droppable area , again if try drop 2nd object. first dropped element should automatically remove , moved draggable area.

basically, 1 element should in droppable area.

here fiddle demo

as droppable area has more 1 element. should remove last element. if added 1 more element. droppable area can't have more 1 object.

code:

$("#dvsource img").draggable({     revert: "invalid",     //refreshpositions: true,     drag: function (event, ui) {         ui.helper.addclass("draggable");     },     stop: function (event, ui) {         ui.helper.removeclass("draggable");         if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {                 console.log($("#dvdest img").length);            }         else {             //alert(image + " not dropped.");         }     } }); $("#dvdest").droppable({     drop: function (event, ui) {         if ($("#dvdest img").length == 0) {             $("#dvdest").html("");         }         ui.draggable.addclass("dropped");                 $("#dvdest").append(ui.draggable);     } }); 

i'm not fabulous animations, here 1 way it.

working example: https://jsfiddle.net/twisty/6auhhjxc/5/

jquery

$(function() {   $("#dvsource img").draggable({     revert: "invalid",     drag: function(event, ui) {       ui.helper.addclass("draggable");     },     stop: function(event, ui) {       ui.helper.removeclass("draggable");       if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {         console.log($("#dvdest img").length);       }     }   });   $("#dvdest").droppable({     drop: function(event, ui) {       if ($("#dvdest img").length === 0) {         $("#dvdest").html("");       } else {         $("#dvdest img:first").hide(600, function() {           $(this).appendto("#dvsource");         }).show(600);       }       ui.draggable.addclass("dropped");       $("#dvdest").append(ui.draggable);     }   }); }); 

in drop, had check. if there img elements in destination when drop, want append drop , append first element source.

i added simple .hide() , .show() animations make fancy. adjusted each image, can see right item moving back.

i suspect there way animate the return in fashion, that's not in bag of tricks. should there if in bag.

update after comments

working example: https://jsfiddle.net/twisty/6auhhjxc/7/

i found issue in draggable code kept throwing error. removed it.

since destroy/create draggables on , over, made function this. drag/drop adds bunch of styling retain positioning drop , class when pass img source.

jquery

function makedrag(el) {   // pass me object, , make draggable   el.draggable({     revert: "invalid"   }); } $(function() {    makedrag($("#dvsource img"));    $("#dvdest").droppable({     drop: function(event, ui) {       if ($("#dvdest img").length === 0) {         $("#dvdest").html("");       } else {         $("#dvdest img:first").hide(600, function() {           $(this).removeattr("class");           $(this).removeattr("style");           $(this).appendto("#dvsource");         }).show(600, function() {           makedrag($(this));         });       }       ui.draggable.addclass("dropped");       ui.draggable.draggable("destroy");       $("#dvdest").append(ui.draggable);     }   }); }); 

the code in stop causing issue:

if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {     console.log($("#dvdest img").length); } 

i switched uncompressed version, , error thrown was:

typeerror: draggable undefined

$.each( ( $.ui.ddmanager.droppables[ draggable.options.scope ] || [] ).slice(), ...

the section of code is:

    $.each( ( $.ui.ddmanager.droppables[ draggable.options.scope ] || [] ).slice(), function() {          if ( !this.options ) {             return;         }         if ( !this.options.disabled && this.visible && $.ui.intersect( draggable, this, this.options.tolerance, event ) ) {             dropped = this._drop.call( this, event ) || dropped;         }          if ( !this.options.disabled && this.visible && this.accept.call( this.element[ 0 ], ( draggable.currentitem || draggable.element ) ) ) {             this.isout = true;             this.isover = false;             this._deactivate.call( this, event );         }      }); 

in minimized code, t, issue same. when passed ui.helper.data("draggable") $.ui.ddmanager.drop(), value null or undefined. reason this, in scope of script, ui.helper did not have data-draggable attribute.

again, not clear intended action there, removed it.