6

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

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

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

4

6 回答 6

15

不幸的是，设置助手宽度的 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-19T17:38:15.797 回答
5

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

$('#element').sortable({
    receive: function(event, ui) {
        ui.helper.first().removeAttr('style'); // undo styling set by jqueryUI
    }
于 2014-11-03T08:59:51.363 回答
1

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

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

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

$( "#myDraggable > div" ).each(function( index ) {
    $(this).css({
        'width':$(this).width()
    });
});
于 2015-11-13T15:37:55.463 回答
0

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

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-12T14:48:00.050 回答
0

请试试这个：

$('#draggable-id').draggable({
    stop: function ( event, ui ) {
         $(ui.helper[0]).attr('style', '');
         //your css
         //$(ui.helper[0]).css({});
    },
});
于 2018-08-23T09:26:30.007 回答
0

为什么不使用helper 功能提供的eventand uivars 而不是使用 jQuery 搜索 helper 呢？

例如，我在元素周围添加了一个带有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);
    });
},
于 2021-07-05T08:10:36.613 回答