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是一个可以设置

的选项

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

如果您希望在将元素拖动到某处后使用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可拖动恢复函数中获取元素？

2 个答案: