Javascript jQuery Dropable-每个目标动态一项

我试图让dragItem_1只被target_1接受，以此类推

我希望动态地将accept参数更改为被拖动项的id

我可以通过定义每个可拖动和可拖放的项来让它工作，但是由于项和目标的数量是用户生成的，所以我需要动态地执行它

$( function() {
  $( ".js-draggable-box" ).draggable({
    revert: "invalid",
    start: function( event, ui ) {
      var item = ui.draggable;
      var id = $(item).attr('id');
      console.log(id)
    }
  });

  $( ".js-drop-target" ).droppable({
    accept: ".js-draggable-box",
    drop: function( event, ui ) {
      var dropped = ui.draggable;
      var droppedOn = $(this);
      $(this).addClass( "c-drop-target--correct" ).droppable("disable");
      $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn).draggable("disable");
    }
  });
} );

---

我还尝试获取开始事件的ID，但我得到了一个未定义的ID。

希望我正确地理解了您的意思，因此假设您想要目标放置区域，那么它只是匹配值/属性，如果为false，则请求无效

现在，我的方法大大改变了你所拥有的。我选择了分类

MVC/HTML

---

你想完成什么还不清楚。也就是说，当您开始拖动项目时，有一种方法可以更新droppable的accept选项

我将向您展示两种有效的方法

首先，初始放置项目。然后拖动项目。这确保了我们可以在开始拖动时更新拖放选项

$(function() {
  $(".drop_items .box").droppable({
    accept: ".none",
    drop: function(event, ui) {
      var dropped = ui.draggable;
      var droppedOn = $(this);
      $(this).addClass("c-drop-target--correct").droppable("disable");
      dropped.detach().css({
        top: 0,
        left: 0
      }).appendTo(droppedOn).draggable("disable");
    }
  });

  $(".drag_items .box").draggable({
    revert: "invalid",
    start: function(e, ui) {
      var item = ui.helper.attr("id")
      var target = "#dropTarget_" + item.slice(-1);
      console.log("Setting 'accept' for " + target + " to '#" + item + "'");
      $(target).droppable("option", "accept", "#" + item);
    }
  });
});

工作示例：

需要注意的是，draggable使用ui.helper，而不是ui.draggable。ui.helper和ui.draggable是jQuery对象，不必用$包装

其次，我们可以在droppable中使用accept回调选项

$(function() {
  $(".drop_items .box").droppable({
    accept: function(item) {
      var target = $(this);
      var targetNumber = target.attr("id").slice(-1);
      var itemNumber = item.attr("id").slice(-1);
      return targetNumber === itemNumber;
    },
    drop: function(event, ui) {
      var dropped = ui.draggable;
      var droppedOn = $(this);
      $(this).addClass("c-drop-target--correct").droppable("disable");
      dropped.detach().css({
        top: 0,
        left: 0
      }).appendTo(droppedOn).draggable("disable");
    }
  });

  $(".drag_items .box").draggable({
    revert: "invalid"
  });
});

工作示例：

---

希望这能有所帮助。

jQuery的文档中说，accept选项在示例和函数中同时接受.js draggable box等字符串。我相信匿名函数会有所帮助

接受

类型：选择器或函数

默认值：*

控制可拖放组件接受哪些可拖放元素

$(function() {
  $(".drop_items .box").droppable({
    accept: function(item) {
      var target = $(this);
      var targetNumber = target.attr("id").slice(-1);
      var itemNumber = item.attr("id").slice(-1);
      return targetNumber === itemNumber;
    },
    drop: function(event, ui) {
      var dropped = ui.draggable;
      var droppedOn = $(this);
      $(this).addClass("c-drop-target--correct").droppable("disable");
      dropped.detach().css({
        top: 0,
        left: 0
      }).appendTo(droppedOn).draggable("disable");
    }
  });

  $(".drag_items .box").draggable({
    revert: "invalid"
  });
});

支持多种类型：

选择器：指示接受哪些可拖动元素的选择器

Function：将为作为第一个参数传递给函数的页面上的每个draggable调用的函数。如果应接受draggable，则函数必须返回true

资料来源：

如果您想要一个例子，这里有一个关于此的StackOverflow问题/答案： . 向下滚动到morten.c的答案。

这将在开始时完成，但每个拖动项如何知道哪个目标？或者，您是说希望每个目标在项目被丢弃时不再可丢弃？现在还不清楚你想要完成什么。

$(function() {
  $(".drop_items .box").droppable({
    accept: function(item) {
      var target = $(this);
      var targetNumber = target.attr("id").slice(-1);
      var itemNumber = item.attr("id").slice(-1);
      return targetNumber === itemNumber;
    },
    drop: function(event, ui) {
      var dropped = ui.draggable;
      var droppedOn = $(this);
      $(this).addClass("c-drop-target--correct").droppable("disable");
      dropped.detach().css({
        top: 0,
        left: 0
      }).appendTo(droppedOn).draggable("disable");
    }
  });

  $(".drag_items .box").draggable({
    revert: "invalid"
  });
});