javascript - Jquery 阻止 drop 事件发生

Question

我们使用 Jquery 来拖放事件。场景 我将用户放在日历上，以便他们可以参加 3 天。然后我可以将用户拖到第四天，这样就可以了。但是，如果我将用户拖动到它们已经存在的位置，那么我仍然可以将它们放在这里，以便看起来它们在那里两次。我需要检查该人是否已经在目标区域中，如果是，则不允许进行转换。在我的 Html 页面中，我有以下内容，它是我需要检查的 data-id 元素:

<div class="row" data-bookingid="@attendee.Id">
     <div class="col-md-12 attendee">
          <div class="col-md-8">
                   @attendee.ServiceUser.FullName
          </div>
          @if (Issues.Count > 0)
          {
             <div class="col-md-8">
                 @String.Join(", ", Issues.ToArray())
             </div>
          }
          <div class="col-md-2" style="text-align: right">
             <button class="btn btn-default icon text-file" style="background-color: transparent; border: none; padding:0;" type="button" data-id="@attendee.ServiceUser.Id"></button>
          </div>
          <div class="col-md-2" style="text-align: right">
             <button class="btn btn-default icon delete" style="background-color: transparent; border: none; padding: 0;" type="button" data-bookingid="@attendee.Id"></button>
          </div>
   </div>

以上内容是在 foreach 循环中构建的，并附加了参加者类。然后参加者类(class)可拖动。与:

$('.attendee').parent().draggable({ revert: true });

那么droppable函数就有accept和drop的函数。所以我需要知道如何获取被拖动元素的 data-id，然后如何根据拖放区中的项目检查该值。任何指示都会很棒。

Answer 1

应该是这样的:监听 drop 事件，使用 ui 参数获取对元素的引用，并检查 data 属性。

yourElem.droppable({
    revert: true,
    drop: function (event, ui) {
        var elem = ui.draggable;
        if (elem.data("id")==="xyz") {  //your logic here
            elem.remove();
        }
    }
});

<小时/>

你的 if 检查应该是这样的

if($(this).children('[data-id="' + elem.data("id")  + '"]').length)