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

Question

我有一个可拖动的元素和一个可以放置的元素.在dropzone上删除拖动项后,我试图执行以下jquery伪代码:

if(draggedelement == value){

$(draggedelement).hide();

}
else{

$(draggedelement).revert();

}

其中revert()功能移动拖动的项目回原来现在的位置.

如何实现这一目标？

PS我知道可拖动的'revert'选项,但是只有当被拖动的项目没有进入dropzone时才会激活.

Answer 1

有一些内置的选项,在你的.draggable()设置revert选项上'invalid',如果没有成功地放到一个droppable上它会返回,如下所示:

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

然后在你的.droppable()设置中使用该accept选项对drop有效,例如:

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

当您放手时,任何与此选择器不匹配的内容都会重置,您可以在此处查看完整的演示.如果您需要过滤选择器无法提供,则accept选项也会采用一个函数,如下所示:

$("#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响应,如果为false,则使用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将draggable的原始left和top值添加为数据属性,但对我来说,上面的工作正常.