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）和函数。我相信匿名功能应该会有所帮助。

接受

类型：选择器或Function（）

默认值：“ *”

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

支持多种类型：

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

函数：将为页面上的每个可拖动对象调用的函数（作为函数的第一个参数传递）。如果应接受可拖动对象，则该函数必须返回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")
        }

    }

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

3 个答案: