0

使用 jqueryui 的可排序插件时，一旦您在开始拖动后将鼠标移到放置位置，它会记住并放在那里，即使您在释放鼠标时没有放在任何地方。

有没有办法防止这种情况发生，以便在释放鼠标时如果拖动的 portlet 不在放置位置上方，则它会跳回其原始位置？

4

1 回答 1

1

我有一个解决方法来防止不适当的分配，我的代码更复杂，所以我把它剥离到了最基本的必要性。

使用 OVER 事件向目标添加悬停类

over: function(event,ui){
  $(this).addClass('hover');
}

使用 OUT 事件从目标中移除悬停类

out: function(event,ui){
  $(this).addClass('hover');
}

如果目标没有悬停类，则在接收时取消排序。取消将列表返回到排序开始之前的状态

receive: function(event,ui){
  if( !$(this).hasClass('hover')){
    $(this).sortable('cancel');
  }
}

这仍然留下了另一个问题。目标不会再次响应 OVER 事件，直到某个其他目标首先触发 OVER 事件。

清单 A 项目 1 项目 2

清单 B

第 3 项

  1. 点击item 1，拖过List B：List B上触发OVER事件
  2. 继续将项目1拖出List B：在List B上触发OUT事件
  3. 在没有列表 A 和列表 B 的位置释放项目 1：在列表 B 上触发 RECEIVE（但如果列表 B 仍然没有悬停类，我们可以取消排序 - 在步骤 2 中由 OUT 删除.

此序列显示如何清除假定的目标

  1. 点击item 1，拖过List B：List B上触发OVER事件
  2. 继续将项目1拖出List B：在List B上触发OUT事件
  3. 再次将项目 1 拖到列表 B 上：OVER 事件未触发
  4. 继续将项目 1 拖到 List A 上：在 List A 上触发 OVER 事件
  5. 继续将item 1拖出List A：List A上触发OUT事件
  6. 继续将项目 1 再次拖到 List B 上：在 List B 上触发 OVER 事件

我仍在寻找解决最后一个问题的方法，因为它需要用户通过拖动进行额外的动作以使目标再次处于活动状态（假设他们想将项目 1 从列表 A 拖动到列表 B 但过冲，现在列表 B 赢了'不要第二次触发 MOVE 这意味着我不能将悬停类放在它上面以显示它是活动的放置点。

总之， sortable 会触发 OUT，但仍然会在触发 RECEIVE 的 drop 事件中记住目标，并且还可以防止

于 2012-09-24T07:37:17.990 回答