Question

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

我已尝试使用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;
    }
});

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

Answer 2

老问题，谷歌没有想到。因此，这可能对某些人有用。我在可排序对象上使用该事件，如下所示：

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

Answer 3

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

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

Answer 4

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

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

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

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

Answer 5

请尝试以下操作：

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

Answer 6

为什么不使用 helper 函数提供的 event 和 ui 变量 而不是使用 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);
    });
},

jquery ui draggable + sortable helper style

6 个答案: