Jquery UI 可排序 - 在启动事件触发之前执行操作

Posted 2023-05-08

【中文标题】Jquery UI 可排序 - 在启动事件触发之前执行操作

【英文标题】：Jquery UI sortable - perform action BEFORE start event fires

【发布时间】：2012-04-05 22:47:02

【问题描述】：

我已经在 *** 和其他论坛上搜索了我的问题的解决方案 - 如果我错过了一个可行的解决方案，请指点我。

我的问题： 每当在我的可排序列表中拖动一个元素（一个 portlet div）时，我需要在实际的拖动过程开始之前执行一些操作（根据我在触发 START 事件之前的理解）。

更具体地说： 我的 DIV 为用户提供了扩展/折叠它的主体的可能性（如示例中的 jquery UI 页面 http://jqueryui.com/demos/sortable/#portlets）。

每当拖动一个元素时，我想触发我的折叠方法，以便拖动的唯一可视元素是折叠的 DIV。

但是每当我调用我的方法时（类似这样）

$someitem.trigger("toggle.somenamespace") 

它按预期工作，除了在可排序元素中触发 start 事件之前计算拖动的助手的高度，因此助手在其未折叠状态下具有原始元素的高度。

我对此的最初想法是：正如可排序的那样，例如在实际拖动过程开始之前测量拖动距离的可能性（使用选项：distance）应该可以挂钩到这个流程中，例如存储原始 startDrag 函数（或任何它被称为）临时变量中的可排序小部件，用自定义回调覆盖它，该回调首先触发我的折叠功能，然后调用原始函数以确保正确计算高度。 但是 - 到目前为止，我在这种方法上并没有取得太大的成功......

请注意，在处理程序中为拖动或在可排序事件上方设置 CSS 属性并没有达到预期的效果，因为为帮助程序计算的可排序小部件的高度被设置为元素属性。

或者 - 可能有人知道一种更好的方法来影响在拖动过程中显示的助手的高度，这只是我的原始方法（在拖动过程之前更改元素然后让小部件完成它）计算方式）将是一个更好的解决方案......

感谢您的帮助， 马蒂亚斯

编辑： 将可排序标志： forceHelperSize 设置为 true 并在 start draghandler 中设置 ui.item / helper 大小也不起作用，因为它会在视觉上产生所需的效果（仅拖动折叠的项目，但会阻止元素被向下拖动一直（好像项目在未折叠状态下仍然具有高度） 使用助手测试：“原始”和“克隆”

【参考方案1】：

我已经为这个“解决方案”搜索了很长时间：

$('.handle').each(function() 
    $(this).mousedown(function() 
        $(this).parent().parent().children('ol').hide('blind', 500);
    );
);

您可以通过鼠标按下手柄来触发事件并隐藏您想要的任何内容。然后将可排序的选项延迟设置为大于隐藏动画持续时间的值，在我的示例中为 501。

这不是一个优雅的解决方案，但它有效 - 至少在我的程序中。

【讨论】：

与其做一个 each，不如在 mousedown 中选择“.handle”，然后在应该引用正确元素的 mousedown 函数中使用 $(this) 会更好吗？

您还应该检查 mousemove。 mousedown 可能意味着正常点击。

【参考方案2】：

您可以这样做，但对于即将推出的 jQuery UI 版本来说，这不是未来的证明：

var oldMouseStart = $.ui.sortable.prototype._mouseStart;
$.ui.sortable.prototype._mouseStart = function(event, overrideHandle, noActivation) 
   this._trigger("CustomBeforeStart", event, this._uiHash());
   oldMouseStart.apply(this, [event, overrideHandle, noActivation]);
;

然后您可以在设置可排序时使用新事件：

$(".whatever").sortable(
  "CustomBeforeStart":function(e, ui) 
  
  ...
);

【讨论】：

此回调将在行与表分离后执行。如果要测量单元格宽度，可以修改 $.ui.sortable.prototype._mouseDown;

这是一个出色的解决方案，虽然在 2012 年不是面向未来的，但在 2019 年仍然有效。