jquery ui draggable + sortable helper style

Question

我正在使用jquery ui插件来实现链接到可排序列表元素的拖放.当我移动draggable元素时,会创建一个具有自定义宽度和高度的帮助器.当我的元素位于可排序区域上方时,会创建内联样式并影响我的自定义宽度和高度.帮助器不再具有正确的尺寸,并且占据可分拣区域宽度的100%.您可以在jquery ui示例中看到一个示例http://jqueryui.com/draggable/#sortable我的目标是防止为帮助程序的高度和宽度插入内联样式.那可能吗？

我已经尝试了可排序的forcehelpersize参数,但没有成功.

编辑:我注意到,当我在可排序区域时,帮助程序将初始元素的维度可拖动.

Answer 1

不幸的是,设置助手宽度的ui.sortable代码不会考虑指定类的宽度.我正在使用jQuery 1.8.x并且偶然发现了同样的行为.查看源代码,我看到ui.sortable正在检查是否在元素上指定了宽度样式,如果没有,则将其设置为sortable中第一个元素的宽度.我的解决方案是使用draggable helper选项的函数形式在助手上显式设置宽度和高度.

$('#draggable').draggable({
    helper: function() {
        var helper = $(this).clone(); // Untested - I create my helper using other means...
        // jquery.ui.sortable will override width of class unless we set the style explicitly.
        helper.css({'width': '462px', 'height': '300px'});
        return helper;
    }
});

这些值不必硬编码.例如,您可以从其他元素复制它们.但它们确实需要在辅助元素本身上设置(不是继承).

Answer 2

老问题,谷歌不介意.因此,对某些人来说,这可能仍然有用.我在可排序对象上使用事件如下:

$('#element').sortable({
    receive: function(event, ui) {
        ui.helper.first().removeAttr('style'); // undo styling set by jqueryUI
    }