jQuery Droppable - 每个目标动态一个项目

Question

我试图让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");
    }
  });
} );

我也尝试获取 start 事件的 ID，但我得到一个未定义的。

Answer 1

不清楚你想要完成什么。也就是说，当您开始拖动项目时，有一种方法可以更新 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);
    }
  });
});

工作示例：https://jsfiddle.net/Twisty/agypswbj/6/

需要注意的一点，可拖动使用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"
  });
});

工作示例：https://jsfiddle.net/Twisty/agypswbj/5/

希望对您有所帮助。

Answer 2

jQuery 的文档说accept 选项同时接受字符串（如您的示例中的.js-draggable-box）和函数。我相信匿名函数应该会有所帮助。

接受

类型：选择器或函数（）

默认值：“*”

控制 droppable 接受哪些可拖动元素。

支持多种类型：

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

函数：为页面上的每个可拖动对象调用的函数（作为第一个参数传递给函数）。如果应接受可拖动对象，该函数必须返回 true。

来源：https://api.jqueryui.com/droppable/#option-accept

如果您想要一个示例，这里有一个 StackOverflow 问题/答案： jquery droppable accept。 向下滚动到 morten.c 的答案。

Answer 3

希望我对您的理解正确，因此假设您想要有针对性的拖放区，那么它只是匹配值/属性并在错误时使请求无效。

现在我的方法显着改变了你所拥有的。我选择了Sortable

MVC/HTML

    @foreach (var item in Model.Items)
    {
      <div class="js-drag-container drag-container" data-item-id="@item.Id">
         <h3 class="ui-state-disabled">
          Item @item.Name <i class="fa fa-info-circle info-circle-icon" aria-hidden="true" data-make="@item.Make" data-model="@item.model" data-serial="@item.SerialNumber"></i>
                                <span>@item.something</span>
                                <span>@item.something</span>
        </h3>

         @foreach (var i in item.alias)
         {
          <div class="alias-item btn-red" data-item-id="@item.Id">
              <p class="alias">@i.Alias</p>
          </div>
          }
       </div>
    }

JS

这是一个相当粗略的尝试，但是应用一个唯一的 id 并在接收时进行比较，您可以取消丢弃。

$(".js-drag-container").sortable({
    connectWith: ".js-drag-container",
    delay: 15,
    revert: true,
    dropOnEmpty: true,
    scroll: false,
    cursor: "move",
    items: "> div:not(.ui-state-disabled)",
    start: function (event, ui) {
    },
    stop: function (event, ui) {
    },
    receive: function (event, ui) {

        //Item being moved.
        var childId = ui.item.attr('data-item-id');
        //parentId of the col being dropped into
        var parentId = ui.item.parent().attr('data-item-id');

        if (childId != parentId)
        {
            //Cancel drop
            $(ui.sender).sortable('cancel');

            console.log("Drop Cancelled")
        }

    }