如何在 jQueryUI 可拖动还原功能中获取元素？

Question

我知道 jQuery draggable 可以接受 revert 动作的函数。

$(".clipboard-li").draggable({
     revert: function (event) {
         console.log(event) // boolean value
     }
});

但是传递给这个函数的参数是一个布尔值。
如何获取此函数中当前正在拖动的元素？

Answer 1

revert处理函数运行在被拖动元素的范围内；它没有作为参数传入。因此，您可以使用 this 关键字来引用元素：

$('.drag').draggable({
  revert: function() {
    return this.prop('id') != 'allow';
  }
})

.drag {
  width: 75px;
  height: 75px;
  background-color: #CCC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div class="drag" id="allow">Allowed</div>
<div class="drag" id="deny">Denied</div>

Answer 2

revert是一个可以设置

的选项

Whether the element should revert to its start position when dragging stops

如果您想在将元素拖到某处后获取该元素，请使用 stop 事件

$(".clipboard-li").draggable({
  revert: function(event) {
    return $(this).hasClass("revert"); //You can set it either to true or false
  },
  stop: function( event, ui ) {
    console.log($(event.target).attr("class"));
  }
});

.clipboard-li {
  cursor: move;
  width: 150px;
  height: 150px;
  border: 1px solid #000;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

<div class="container">
  <div class="clipboard-li">
  </div>
  <div class="clipboard-li revert">
  </div>
  <div class="clipboard-li">
  </div>
</div>

如何在 jQueryUI 可拖动还原功能中获取元素？

How to get element in jQueryUI draggable revert function?

javascript

jquery

jquery-ui

jquery-ui-draggable