如何根据条件还原可拖动的jQuery UI的位置 [英] how to revert position of a jquery UI draggable based on condition

问题描述

我有一个可拖动的元素和一个可拖放的元素.将拖动的项目放到放置区后，我将尝试执行以下jquery伪代码:

I have an element which is draggable and an element which is droppable. Once the dragged item is dropped on the dropzone I am trying to execute the following jquery psuedo code:

if(draggedelement == value){

$(draggedelement).hide();

}
else{

$(draggedelement).revert();

}

，其中revert()函数将拖动的项目移回其原始位置.

where the revert() function moves the dragged item back to its original postion.

一个人如何做到这一点?

P.S.我知道可拖动的还原"选项，但是，只有在被拖动的项目没有进入拖放区时，该选项才会激活.

P.S. I am aware of the draggable 'revert' option, however this only activates if the dragged item does not make it to the dropzone.

推荐答案

在您的 revert选项设置为'invalid'，如果未成功将其拖放到可放置对象上，它将返回，如下所示:

There are some built-in options for this, on your .draggable(), set the revert option to 'invalid', and it'll go back if it wasn't successfully dropped onto a droppable, like this:

$("#draggable").draggable({ revert: 'invalid' });

然后在您的 .droppable() 中，使用

Then in your .droppable() set what's valid for a drop using the accept option, for example:

$("#droppable").droppable({ accept: '#draggable' });​

放开所有与该选择器不匹配的内容，您可以在此处看到完整的演示.如果需要过滤选择器无法提供的选择器，则accept选项还具有一个功能，如下所示:

Anything not matching this selector gets reset when you let go, you can see a full demo here. The accept option also takes a function if you need filtering a selector can't provide, like this:

$("#droppable").droppable({ 
  accept: function(dropElem) {
    //dropElem was the dropped element, return true or false to accept/refuse it
  }
});​

这篇关于如何根据条件还原可拖动的jQuery UI的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！