檢查可拖動的對象是否在正確的可拖放容器

Question

我有項目，我可以拖放。現在，在我放棄Item之後，我想檢查我的對象是否在正確的容器中。

什麼是最好的方法來實現這一目標？

這這裏是我的功能吧：

$(function() { 
    $("#draggable").draggable(); 
    $(".item").droppable({ 
     drop: function (event, ui) { 
      var $this = $(this); 
      $this.append(ui.draggable); 

      var draggableWidth = $('#draggable').width(); 
      var draggableHeight = $('#draggable').height(); 
      var width = $this.width(); 
      var height = $this.height(); 
      var cntrLeft = (width/2) - (ui.draggable.width()/2); 
      var cntrTop = (height/2) - (ui.draggable.height()/2); 

      ui.draggable.animate({width: draggableWidth * 1.1, height: draggableHeight * 1.1}); 
      ui.draggable.animate({width: draggableWidth, height: draggableHeight}); 
      ui.draggable.css({ 
       left: cntrLeft + "px", 
       top: cntrTop + "px" 
      }); 

      // this here is still hard-coded, but it should trigger on the element I'm holding (image) 
      console.log($('#draggable4').data('image')); 
      console.log($(this).data('target')); 
     } 
    }); 
}); 

如果你看看這個例子：JSFiddle你可以看到，有什麼實際上，我堅持了。您可以移動框中的黃色方塊，但如果它是正確的，則沒有反饋。

澄清它更多：可以說我有2個正方形，一個黃色和一個紅色的。如果黃色正方形放在左邊框上，它應該顯示一個錯誤。否則應該出現刻度符號（不是那種問題）。 紅色也一樣。如果紅色的盒子掉在正確的盒子裏，它應該會出錯......你明白了。

更新1：

我的HTML

<div class="item" data-target="1"></div> 
<div class="item2" data-target="2"></div> 
<div class="item3" data-target="3"></div> 
<div class="item4" data-target="4"></div> 

<div style="position: relative; height: 100%;"> 
    <img src="folie1/img1.png" width="153" height="124" id="draggable" style="z-index: 200;" data-image="1"/> 
    <img src="folie1/img2.png" width="153" height="124" id="draggable2" style="z-index: 201;" data-image="2"/> 
    <img src="folie1/img3.png" width="153" height="124" id="draggable3" style="z-index: 202;" data-image="3"/> 
    <img src="folie1/img4.png" width="153" height="124" id="draggable4" style="z-index: 203;" data-image="4"/> 
</div> 

我要檢查，如果當前的對象（可以說data-image="1"）在容器data-target="1"被丟棄。

更新2

這是我現在的HTML：

<div class="item" id="item" data-target="1"></div> 
<div class="item" id="item2" data-target="2"></div> 
<div class="item" id="item3" data-target="3"></div> 
<div class="item" id="item4" data-target="4"></div> 

<div style="position: relative; height: 100%;"> 
    <img src="folie1/img1.png" width="153" height="124" id="draggable" class="draggable" 
     style="z-index: 200;" data-image="1"/> 
    <img src="folie1/img2.png" width="153" height="124" id="draggable2" class="draggable" 
     style="z-index: 201;" data-image="2"/> 
    <img src="folie1/img3.png" width="153" height="124" id="draggable3" class="draggable" 
     style="z-index: 202;" data-image="3"/> 
    <img src="folie1/img4.png" width="153" height="124" id="draggable4" class="draggable" 
     style="z-index: 203;" data-image="4"/> 
</div> 

...與JS從Rajen蘭芝斯

$(function() { 
    var result = {}; 
    $(".draggable").draggable({ 
     start: function (e) { 
      result.drag = e.target.id.split("_")[1]; 
     } 
    }); 
    $(".item").droppable({ 
     drop: function (event, ui) { 

      var $this = $(this); 
      result.drop = event.target.id.split("_")[1]; 
      if (result.drag == result.drop) 
       alert("true"); 
      else 
       alert("false"); 
      $this.append(ui.draggable); 

      var width = $this.width(); 
      var height = $this.height(); 
      var cntrLeft = (width/2) - (ui.draggable.width()/2); 
      var cntrTop = (height/2) - (ui.draggable.height()/2); 

      ui.draggable.css({ 
       left: cntrLeft + "px", 
       top: cntrTop + "px" 
      }); 
     } 
    }); 
}); 

我可以拖放我的圖片，但它總是提醒「真實」。

Answer 1

使用ID，或兩者兼有拖動元素屬性和下降元件 http://jsfiddle.net/rajen_ranjith/F3sD3/285/

$(function() { 
var result = {}; 
$(".draggable").draggable({ 
    start:function(e){ 
     result.drag = e.target.id.split("_")[1]; 
    } 
}); 
$(".item").droppable({ 
    drop: function(event, ui) { 

     var $this = $(this); 
     result.drop = event.target.id.split("_")[1]; 
     if(result.drag == result.drop) 
      alert("true"); 
     else 
      alert("false"); 
     $this.append(ui.draggable);  

     var width = $this.width(); 
     var height = $this.height(); 
     var cntrLeft = (width/2) - (ui.draggable.width()/2); 
     var cntrTop = (height/2) - (ui.draggable.height()/2); 

     ui.draggable.css({ 
      left: cntrLeft + "px", 
      top: cntrTop + "px" 
     }); 
    } 
}); 

}）;

Answer 2

我已經通過使用dropable div中的data-attribute解決了這個問題，如here所述。你可以用像this這樣的jQuery檢查數據值。數據屬性可能比可拖動div上的數據屬性檢查。如果相等，它可能是正確的。