jQuery UI可排序-在启动事件触发前执行操作 [英] Jquery UI sortable - perform action BEFORE start event fires

问题描述

我已经在STACKOVERFLOW和其他论坛中搜索了解决我的问题的方法-如果我错过了一个可行的解决方案，请指向我.

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

更具体地说: 我的DIV为用户提供了扩展/折叠其身体的可能性(例如在示例中，出现在jquery用户界面页面上

它可以按预期工作，除了在开始可排序对象之前触发start事件之前已计算拖动的辅助对象的HEIGHT之外，因此该辅助对象的原始元素的高度处于未折叠状态.

我最初的想法是:因为可排序的内容例如在实际的拖动过程开始之前测量拖动距离的可能性(使用选项: distance )，应该有可能挂接到该流中，例如，存储原始的 startDrag 函数(或所谓的)临时变量中的可排序窗口小部件，请使用自定义回调将其覆盖，该回调首先触发我的折叠功能，然后调用原始函数以确保高度计算正确. 但是-到目前为止，我在这种方法上没有取得太大的成功.

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

或者-也许有人知道一种更好的方法来影响在拖动过程中显示的助手的高度，这只是我的观点，我的原始做法是(在拖动过程之前更改元素，然后让小部件完成计算其意图)将是一个更好的解决方案...

感谢您的协助， 马蒂亚斯(Matthias)

将sortable标志:forceHelperSize设置为true并在开始draghandler中设置ui.item/helper大小也不起作用，因为这会在视觉上产生所需的效果(仅拖动折叠的项目，但停止向下拖动元素一路走来(好像项目在未折叠状态下仍具有高度) 经过助手测试:原始"和克隆"

解决方案

我已经为这个解决方案"搜索了很长时间:

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

您可以通过将鼠标指针放下并隐藏任何所需内容来触发事件.然后在我的示例501中，将sortable的选项延迟设置为大于隐藏动画持续时间的值.

这不是一个优雅的解决方案，但它可以正常工作-至少在我的程序中如此.

I have searched STACKOVERFLOW and other forums for the solution to my problem - if I have missed a working solution please point me towards it.

My Problem: Whenever dragging an element (a portlet div) in my sortable list, I need to perform some action BEFORE the actual drag process starts (From what I understand before the START event is fired).

To be more specific: My DIVs provide the user with the possibility to extend/collapse it´s body (like in the example seem at the jquery UI page http://jqueryui.com/demos/sortable/#portlets).

Whenever dragging an element I´d like to trigger my collapse method so that the only visual element being dragged is the collapsed DIV.

However whenever I call my method (something like this)

$someitem.trigger("toggle.somenamespace") 

it works as expected, except that the HEIGHT of the dragged helper gets calculated BEFORE the start event is fired in the sortable and therefore the helper has the height of the original element in its un-collapsed state.

My original thought on this was: as the sortable has e.g. the possibility the measure a drag distance before the actual drag procedure starts (with the option: distance) it should be possible hook into this flow, for example storing the original startDrag function (or whatever it is called) of the sortable widget in a temporary var, override it with a custom callback which first triggers my collapse functionality and then calls the original function to ensure that the height is calculated correctly. However - I did not have much success with this approach so far...

Please note that setting CSS properties in the handlers for the drag or over an event of the sortable has not the desired effect, as the height the sortable widget calculated for the helper is set as element properties.

Or - probably someone knows a better way to affect the height of the helper being displayed during the drag process, it´s just my opinion that my original approach (changing the element before the drag process and then let the widget do its calculations the way it was intented) would be a better solution...

thanks for any assistance, Matthias

EDIT: Setting the sortable flag: forceHelperSize to true and setting the ui.item / helper size in the start draghandler does not work either, as it results in the desired effect visually (only the collapsed item is dragged, but stops the element from being dragged down all the way (as if the item would still have the height in its un-collapsed state) tested with a helper: 'original' and 'clone'

解决方案

I've searched a long time for this "solution":

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

You can trigger a event by mousedowning the handle and hide whatever you want. Then set the option delay of the sortable to a value greater than the duration of the hiding animation, in my example 501.

It's not a elegant solution, but it works - at least in my program.

这篇关于jQuery UI可排序-在启动事件触发前执行操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！