jquery ui 可拖动 + 可排序助手样式答案

【问题标题】：jquery ui draggable + sortable helper stylejquery ui 可拖动 + 可排序助手样式
【发布时间】：2013-02-20 05:18:20
【问题描述】：

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

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

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

【问题讨论】：

我们可以提供一些您正在尝试的代码吗？
毫无疑问，很多人会不同意，但取决于你如何构建你的 CSS（尤其是它是否会为未来的开发工作造成混乱），你可以使用 !important 属性来确保应用宽度和高度。

标签： css jquery-ui draggable jquery-ui-sortable helper

【解决方案1】：

不幸的是，设置助手宽度的 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;
    }
});

不必对这些值进行硬编码。例如，您可以从另一个元素复制它们。但是它们确实需要在辅助元素本身上设置（不是继承的）。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

如果有多个元素可以循环使用：

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

【讨论】：

【解决方案4】：

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

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;
}

【讨论】：

【解决方案5】：

请试试这个：

$('#draggable-id').draggable({
    stop: function ( event, ui ) {
         $(ui.helper[0]).attr('style', '');
         //your css
         //$(ui.helper[0]).css({});
    },
});

【讨论】：

【解决方案6】：

为什么不使用 helper 功能提供的event 和ui vars 而不是用 jQuery 搜索助手？

例如，我在元素周围添加了一个带有prepend/append 的表格，以在移动它时保持tr 的样式。

helper: function(event, ui) {
    ui.prepend('<table class="sorting table table-striped table-hover table-bordered"><tbody>')
      .append('</tbody></table>');
    ui.addClass('my-helper');
    return ui;
},

您也可以使用现有的 .ui-sortable-helper 类：

.ui-sortable-helper {
    background-color: #ccc !important;  
}
.ui-sortable-helper td {
    padding: 0px 5px;
}

在stop 功能上，您可以像这样轻松删除不再需要的元素：

stop: function(e, ui) {
    $('.sorting').replaceWith(function() {
        return $('tr', this);
    });
},

【讨论】：