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

【问题标题】：How to get element in jQueryUI draggable revert function?如何在 jQueryUI 可拖动还原功能中获取元素？
【发布时间】：2018-06-13 07:51:07
【问题描述】：

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

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

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

【问题讨论】：

您到底想实现什么？因为revert 是一个选项，而不是事件。所以这只是告诉draggable当拖动停止时元素是否应该恢复到它的起始位置。
您可能想查看stop 事件。

标签： javascript jquery jquery-ui jquery-ui-draggable

【解决方案1】：

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>

【讨论】：

【解决方案2】：

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>

【讨论】：