31

我有一个可拖动的元素和一个可放置的元素。将拖动的项目放在 dropzone 上后，我将尝试执行以下 jquery 伪代码：

if(draggedelement == value){

$(draggedelement).hide();

}
else{

$(draggedelement).revert();

}

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

如何做到这一点？

PS我知道可拖动的“还原”选项，但是只有在拖动的项目没有进入放置区时才会激活。

4

5 回答 5

77

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

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

然后在您的设置中，使用option.droppable()对 drop 有效的内容，例如：accept

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

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

$("#droppable").droppable({ 
  accept: function(dropElem) {
    //dropElem was the dropped element, return true or false to accept/refuse it
  }
});​
于 2010-06-22T00:37:41.783 回答
11

我有一个用例，我必须在 droppable 的 drop 方法中运行一些逻辑来确定可拖动对象是否应该恢复。我使用以下方法来实现这一点：

$('.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-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 将可拖动的原始 left 和 top 值添加为数据属性，但对我来说，上面的工作正常。

于 2015-03-02T20:28:55.470 回答
4

尝试将该代码添加到“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类或里面的文本（注释掉的行）

于 2010-06-21T22:30:09.330 回答
1 
$("#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，在一组droppables中。

PS如果语言无法理解，对不起=）

于 2014-12-24T10:55:21.377 回答
0

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

$draggedObj.css({ top: 0, left: 0 })
$draggedObj.draggable( "destroy" )
$draggedObj.draggable({...whatever my draggable options are...});
于 2016-01-08T01:46:25.180 回答