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

Question

我有一个可拖动的元素和一个可放置的元素。一旦拖动的项目被放到拖放区上，我将尝试执行以下 jquery psuedo 代码：

if(draggedelement == value){

$(draggedelement).hide();

}
else{

$(draggedelement).revert();

}

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

如何实现这一目标？

PS 我知道可拖动的“恢复”选项，但是只有当拖动的项目没有到达放置区时才会激活。

Answer 1

在您的 .draggable()，将 revert 选项 设置为 ' invalid'，如果它没有成功地放置到可放置的对象上，它会返回，如下所示：

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

然后在您的 .droppable() 使用 接受选项，例如：

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

当您放开时，任何不匹配此选择器的内容都会被重置，您可以在此处查看完整的演示。如果您需要过滤选择器无法提供的功能，则接受选项还需要一个函数，如下所示：

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

Answer 2

我有一个用例，我必须在 droppable 的 drop 方法中运行一些逻辑来确定draggable 是否应该恢复。我使用以下方法来实现此目的：

$('.draggable-elements').draggable({
  revert: function() {
    if ($(this).hasClass('drag-revert')) {
      $(this).removeClass('drag-revert');
      return true;
    }
  }
});

$('.droppable-elements').droppable({
  drop: function(event, ui) {
    if ( % conditional logic check here % ) {
      return $(ui.draggable).addClass('drag-revert');
    }
  }
});

我的用例是一个表格，其中每个单元格都是代表 5 分钟时间段的可放置单元格。我的可拖动对象是从一个单元格开始的预订，但连续运行多个单元格来表示预订时间。

我不希望任何可拖动项重叠，因为这代表重复预订。因此，在放置之后，我会找到该行中的所有可拖动对象（不包括我刚刚移动的可拖动对象），并检查是否有任何重叠。如果存在重叠，我的条件逻辑将返回 true，并恢复可拖动。

下一阶段是触发 ajax 调用来更新数据库，如果服务器端逻辑表明移动无效，我希望返回错误状态并恢复可拖动。

PS这是我的第一次回答，如果我做错了什么，抱歉。关于如何提供良好答案的提示很高兴被接受。

编辑：在尝试我的 AJAX 调用之后，我意识到 droppable.drop 函数在运行draggable.revert 函数之前有一个机会来做它的事情。当我的 AJAX 调用返回 false 时，窗口已经过去，添加类已经太晚了，无法让 Draggable.revert 做出反应。

因此，我不再依赖draggable.revert函数，而是仅作用于AJAX响应，如果为假，则使用animate()将draggable返回到其原始位置，如下所示：

$( '.draggable-elements' ).draggable();

$( '.droppable-elements' ).droppable({
  drop: function( event, ui ) {
    var postData = {
      id: 1,
      ...
    };
    $.post( '/ajax/url', postData, function( response ) {
      var response = $.parseJSON( response );
      if ( response.status != 1 ) {
        return ui.draggable.animate( {left: 0, top: 0}, 500 );
      }
    }
  }
});

您可能需要将draggable.start/drag添加可拖动的原始左侧值和顶部值作为数据属性，但对我来说，上面的方法工作得很好。

Answer 3

尝试将该代码添加到“drop”事件中。这是一个演示。

HTML

<div class="draggable ui-widget-content correct"><p>1</p></div>
<div class="draggable ui-widget-content"><p>2</p></div>
<div class="draggable ui-widget-content"><p>3</p></div>
<div class="draggable ui-widget-content"><p>4</p></div>
<br style="clear: both">
<div id="droppable" class="ui-widget-header">
  <p>Drop me here</p>
</div>

脚本

$(function() {

 $(".draggable").draggable({ revert: true });

 $("#droppable").droppable({
  activeClass: 'ui-state-hover',
  hoverClass: 'ui-state-active',
  // uncomment the line below to only accept the .correct class..
  // Note: the "drop" function will not be called if not ".correct"
  //  accept : '.correct',
  drop: function(event, ui) {
   // alternative method:
   // if (ui.draggable.find('p').text() == "1") {
   if (ui.draggable.is('.correct')) {
    $(this).addClass('ui-state-highlight').find('p').html('You got it!');
    // cloning and appending prevents the revert animation from still occurring
    ui.draggable.clone(true).css('position', 'inherit').appendTo($(this));
    ui.draggable.remove();
   } else {
    $('#droppable > p').html('Not that one!')
    setTimeout(function(){ $('#droppable > p').html('Drop here'); }, 1000);
   }
  }
 });

});

正如您在脚本中看到的，您可以查找 . Correct 类或其中的文本（注释掉的行）

Answer 4

$("#droppable").droppable({ 
    accept: function(dropElem) {
        //dropElem was the dropped element, return true or false to accept/refuse it
        if($(this).data('stoneclass') == dropElem.attr("id")){
            return true;
    }
}
});​

这用于仅接受一组可拖动对象中的一个可拖动对象；一组 droppable 中的一个正确的 droppable。

PS 如果语言无法理解，请见谅 =)

Answer 5

我发现如果我简单地设置top:0和left:0，该项目就不再可拖动。为了“强制”恢复，我必须这样做：

$draggedObj.css({ top: 0, left: 0 })
$draggedObj.draggable( "destroy" )
$draggedObj.draggable({...whatever my draggable options are...});