jQuery Deny Draggable Elements bereits in Droppable

Question

Ich habe einige jQuery divs mit der Drop-Drop-Klasse "dropBox"; Ich möchte divs mit der Klasse "teamBox" akzeptieren, aber nur, wenn sie nicht bereits im Dropbox-Container "dropBox" existieren. Ich habe versucht, dies zu tun, indem Sie das Ereignis over für die DropBox verwenden, aber festgestellt, dass überprüft, ob DropBox enthalten das ziehbare Element immer True zurückgegeben. Ich habe auch versucht, eine Bedingung in den accept Teil der DropBox, aber ich hatte das gleiche Problem. Code für beide Versuche unten. Vielen Dank!

HTML

<div class="panel-heading">Teams</div> 
<div class="panel-body teamContainer"> 
    @foreach($teamContent as $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 as $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 as $pageID => $pageName) 
      <span class="{{ $pageID }}"> 
       <h5>{{ $pageName }}</h5> 
      </span> 
      <div id="{{ $pageID }}" class="dropBox"></div> 
     @endforeach 
    @endif 
</div> 

jQuery Versuch mit over

$(".teamBox").draggable({ 
    helper: 'clone', 
    zIndex: 1, 
}); 

$(".dropBox").droppable({ 
    accept: '.teamBox', 
    over: function(event, ui) { 
     var draggable = ui.draggable; 
     var over = $(this); 
     if($(over).find($(draggable).attr('id'))) 
     { 
      //Always logs as 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 Versuch mit 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 mit einem s kommen Ended up Lösung, die für mich funktioniert hat. Hier ist a Fiddle. Denken Sie daran, dass ich Laravel Spark verwende, also gibt es eine Laravel-Blade-Syntax innerhalb des HTML, die in der Fiddle nicht korrekt kompiliert wird. Wenn Sie sich jedoch den Code ansehen, erhalten Sie möglicherweise eine Vorstellung davon, wie Sie ein Drag-and-Drop-System mit dem Klonen und der Verweigerung doppelter ziehbarer Elemente erstellen können.

Answer 1

Ich würde versuchen, dies in draggablerevert mit:

$(".teamBox").draggable({ 
    helper: 'clone', 
    zIndex: 1, 
    revert: function(){ 
     return $(".dropBox .teamBox").length ? true : false; 
    } 
}); 

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

Ob das Element in seine Startposition zurückkehren soll, wenn Stopps ziehen.

Funktion: Eine Funktion zur Bestimmung, ob das Element in seine Startposition zurückkehren soll. Die Funktion muss true zurückgeben, um das Element zurückzusetzen.