如何在jQuery UI中使make.droppable工作？

Question

我設計了一個簡單的拖放游戲來訓練我的jQuery UI技能，但是由於某些原因，我無法將圓圈放到相同顏色的正方形上。 並且當它起作用時，它位於正方形后面而不是在頂部:(。我的代碼在做什么錯？

（在我的代碼段中，圓圈捕捉到了正方形，但是在chrome中卻沒有）

小提琴： https : //jsfiddle.net/2udcoyjt/

JS在這里：

$(".draggers").draggable({
  revert: 'invalid'
});

$(".droppers").droppable({
  accept: function(item) {
    return $(this).data("color") == item.data("color");
  },
  drop: function(event, ui) {
    var $this = $(this);
    ui.draggable.position({
      my: "center",
      at: "center",
      of: $this,
      using: function(pos) {
        $(this).animate(pos, 150, "linear");
      }
    });
  }
});

Answer 1

您必須使用放置控件的ID來定義每個控件的接受和放置選項，因為在每個拖動事件（開始，停止，輸入，離開）以及沿着控件邊緣的拖動操作上都將運行可放置接受功能頁。 嘗試

console.log($(this).data.data("color") )

並且您會看到在每個事件中（開始，停止，進入，離開..）都會顯示紅色藍色

這是一個工作的小提琴