jquery ui可拖拽+排序辅助风格

我正在使用jquery ui插件来实现链接到可排序列表元素的拖放操作。当我移动可拖动元素时，会使用自定义宽度和高度创建助手。当我的元素位于可排序区域上方时，会创建一个内联样式并影响我的自定义宽度和高度。该帮助程序不再具有正确的尺寸，并且占可分区域宽度的100％。你可以在这里看到一个关于jQuery UI示例的示例http://jqueryui.com/draggable/＃可排序我的目标是防止为助手的高度和宽度插入内联样式。这可能吗？jquery ui可拖拽+排序辅助风格

我尝试了可排序的forcehelpersize参数，但没有成功。

编辑：我注意到，当我在可排序区域时，助手会将初始元素的尺寸拖动。

来源

2013-03-05 Arnaud Ncy

我们可以尝试一些你的代码吗？ – 2013-03-06 07:42:58

毫无疑问，许多人会不同意，但取决于你如何构造你的CSS（特别是它是否会导致未来开发工作的混乱），你可以确保使用！important属性来应用宽度和高度。 – Jason 2014-11-26 15:00:28

不幸的是，设置助手宽度的ui.sortable代码没有按照指定考虑类的宽度。我正在使用jQuery 1.8.x，并偶然发现了这种相同的行为。查看源代码，我看到ui.sortable正在检查元素上是否指定了宽度样式，如果不是，请将其设置为排序中第一个元素的宽度。我的解决方案是使用可拖动辅助选项的函数形式显式设置助手的宽度和高度。

$('#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; 
    } 
});

这些值不一定要硬编码。例如，您可以从其他元素复制它们。但他们做需要设置在帮手元素本身（不继承）。

来源

2013-04-19 17:38:15

您还可以获取克隆元素的宽度和高度，并使用它们设置克隆本身的宽度和高度。

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': $(this).width(), 'height': $(this).height()}); 
    return helper; 
}

来源

2014-08-12 14:48:00 nikolasleblanc

老问题，谷歌不介意。因此这对某些人来说可能仍然有用。我用该事件的排序对象上如下：

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

来源

2014-11-03 08:59:51 roelleor

优秀的解决方案 – Splurk 2015-02-22 16:01:52

在.ready函数的顶部初始化宽度与实际宽度。如果只有一个元素的使用：

$('#myDraggable').css({ 
    'width' : $('#myDraggable').width() 
});

如果有多个元素可以遍历使用：

$("#myDraggable > div").each(function(index) { 
    $(this).css({ 
     'width':$(this).width() 
    }); 
});

来源

2015-11-13 15:37:55 user5559444

-1

这将防止jQueryUI的的助手自定宽度：

$("#element").sortable({ 
    start: function(event, ui){ 
     ui.helper.css("width", "auto"); // or set a value if constant 
    } 
});

来源

2017-03-16 13:00:16 blairzotron

jquery ui可拖拽+排序辅助风格

回答

相关问题