jQueryは既にDroppableにあるドラッグ可能な要素を拒否しています

Question

私はドロップ可能なクラス "dropBox"でいくつかのjQuery divを持っています。 divBoxをクラス "teamBox"で受け取りたいのですが、ドロップ可能な "dropBox"コンテナにまだ存在していない場合に限ります。私はdropBoxのoverイベントを使ってこれを試みましたが、dropBoxにdraggable要素が含まれているかどうかを確認すると常にtrueが返されました。私もdropBoxのaccept部分に条件を置こうとしましたが、同じ問題がありました。以下の両方の試みのコード。ありがとう！ accept

Sを考え出すことになった

$(".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 を使用して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の試みを使用して

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の試み私のために働いていた。ここにはa Fiddleがあります。私はLaravel Sparkを使用しているので、HTML内にはFiddleで正しくコンパイルされないLaravelのブレード構文があります。しかし、コードを見ることで、重複したドラッグ可能なアイテムの複製と拒否があるドラッグアンドドロップシステムを作成する方法を知ることができます。

Answer 1

私はrevertを使用してdraggableでこれをしようとするだろう：

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

参考：

http://api.jqueryui.com/draggable/#option-revert停止をドラッグしたときに要素がその開始位置に戻すかどうか。

機能：要素が開始位置に戻るべきかどうかを判断する機能。要素を元に戻すには、関数はtrueを返す必要があります。