javascript - jQuery Deny Draggable Elements Already in Droppable -

i have jquery divs droppable class "dropbox"; want accept divs class "teambox", if don't exist in droppable "dropbox" container. i've tried doing using over event dropbox, found checking if dropbox contained draggable element returned true. tried placing condition in accept portion of dropbox, had same problem. code both attempts below. thanks!

html

<div class="panel-heading">teams</div> <div class="panel-body teamcontainer">     @foreach($teamcontent $teamid => $teamname)         <div id="{{ $teamid }}" class="teambox">             <h5><b>{{ $teamname }}</b></h5>         </div>     @endforeach </div> <div class="panel-heading">twitter</div> <div class="panel-body">     @if(!empty($twittercontent))         @foreach($twittercontent $twitterid => $screenname)             <span class="{{ $twitterid }}">                 <h5>{{ '@' . $screenname }}</h5>             </span>             <div id="{{ $twitterid }}" class="dropbox"></div>         @endforeach     @endif </div> <div class="panel-heading">facebook</div> <div class="panel-body">     @if(!empty($facebookcontent))         @foreach($facebookcontent $pageid => $pagename)             <span class="{{ $pageid }}">                 <h5>{{ $pagename }}</h5>             </span>             <div id="{{ $pageid }}" class="dropbox"></div>         @endforeach     @endif </div> 

jquery attempt using over

$(".teambox").draggable({     helper: 'clone',     zindex: 1, });  $(".dropbox").droppable({     accept: '.teambox',     over: function(event, ui) {         var draggable = ui.draggable;         var on = $(this);         if($(over).find($(draggable).attr('id')))         {             //always logs disabling             console.log("disabling");             $(over).droppable('disable');         }     },     drop: function(event, ui) {         var dropped = ui.draggable;         var droppedon = $(this);         $(this).append($(dropped).clone());         $(".dropbox .teambox").addclass("item");         $(".item").removeclass("ui-draggable");         $(".item").draggable({             zindex: 1,         });     } }); 

jquery attempt using accept

$(".teambox").draggable({     helper: 'clone',     zindex: 1, });  $(".dropbox").droppable({     accept: function(draggable) {         if($(this).has($(draggable).attr('id'))) {             //always returns false             console.log("returning false");             return false;         }         return true;     },     drop: function(event, ui) {         var dropped = ui.draggable;         var droppedon = $(this);         $(this).append($(dropped).clone());         $(".dropbox .teambox").addclass("item");         $(".item").removeclass("ui-draggable");         $(".item").draggable({             zindex: 1,         });     } }); 

edit ended coming solution worked me. here's a fiddle. keep in mind i'm using laravel spark, there's laravel blade syntax within html doesn't compile correctly in fiddle. however, looking @ code may give idea of how create drag-and-drop system cloning , denial of duplicated draggable items.

i try in draggable using revert:

$(".teambox").draggable({     helper: 'clone',     zindex: 1,     revert: function(){         return $(".dropbox .teambox").length ? true : false;     } }); 

reference: http://api.jqueryui.com/draggable/#option-revert

whether element should revert start position when dragging stops.

function: function determine whether element should revert start position. function must return true revert element.