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 循环中构建的，并附加了一个参加者课程。然后将参加者类设为可拖动的。与：

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

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

Answer 1

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

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)