如何在jQueryUI可拖动恢复函数中获取元素？

Posted 2021-03-31

我知道jQuery draggable可以接受revert动作的功能。

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

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

答案

revert是您可以设置的选项

拖动停止时元素是否应恢复到其起始位置

如果你想在将它拖动到某个地方后获取该元素，请使用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>

另一答案

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>

以上是关于如何在jQueryUI可拖动恢复函数中获取元素？的主要内容，如果未能解决你的问题，请参考以下文章

如何根据条件恢复可拖动的jquery UI的位置

如何让我的 JQueryUI 可拖动元素浮动到另一个溢出的元素中？

如何使用 jQuery UI 获取可拖动和可调整大小元素的坐标

jQuery UI - Droppable 只接受一个可拖动的

如何在具有 contentEditable 的元素上启用“可拖动”？

滚动浏览器时使用错误起始位置的可拖动 jQuery UI 元素？