jquery ui draggable 自动改变宽度答案

【问题标题】：jquery ui draggable changes the width automaticallyjquery ui draggable 自动改变宽度
【发布时间】：2015-11-16 19:56:11
【问题描述】：

我正在关注jquery ui docs，以使 div 可拖动和排序。它确实适用于拖动和排序。但是，当我将一个 div 从可拖动到可排序中取出时，可拖动的宽度会发生变化，并且不会保留其应有的宽度。

这里是demo

js:

$(function() {
    $('#grid-main_content').sortable({
        revert:true
    });

    $('#block-list .block').draggable({
        connectToSortable: '#grid-main_content',
        helper: 'clone',
        revert:'invalid'
    });
})

如果我检查拖动到可排序的元素，我可以看到内联样式被赋予了宽度（通过 jquery）的可拖动块。

如何保持块已有的样式？谢谢。

【问题讨论】：

所以你需要的是，保持两者的宽度相等
@Vijay 我需要拖动到可排序的块以具有与#grid-main_container 中其他块相同大小的宽度。
你有另一个 css 文件。
@Vijay 不只是那些在 codepen 演示中的那些

标签： javascript jquery html css jquery-ui

【解决方案1】：

你可以使用draggables的start event，来维护helper的特定风格

$('#block-list .block').draggable({
    connectToSortable: '#grid-main_content',
    helper : 'clone',
    revert : 'invalid',
    start  : function(event, ui){
        $(ui.helper).addClass("ui-helper");
    }
});

CSS：

.ui-helper {
    width: 100% !important;
}

Demo

【讨论】：

是的。它的工作。但是当我拖动它时，它只会覆盖浏览器的整个宽度。但是，它确实保留了#grid-main_container 内的宽度，但是即使在拖动时，是否可以保持可拖动块的宽度？就像你对 jquery ui 1.10.4 的评论一样。
您可以在最新的 jQuery UI 中使用.ui-draggable-dragging，无需自定义 JavaScript。
这和 Steven Kaspar 的解决方案都不适用于我在 Chrome 中使用可拖动的<tr>。似乎绝对定位的<tr> 不会正确包含其<td>s。如果在 ` 上设置背景颜色或边框，它将具有正确的宽度，但表格单元格会在右侧留下一个间隙。

【解决方案2】：

这对我有用。只需将其设置为可拖动元素的宽度即可

$('.selector').draggable({
   helper: 'clone',
   start: function(event, ui){
      $(ui.helper).css('width', `${ $(event.target).width() }px`);
   }
})

这样你就不用添加 CSS

【讨论】：

【解决方案3】：

我只是创建一个Codepen demo

看看这个，如果它似乎工作，复制代码。

如果您需要将div的下部恢复到原来的大小，请更改

#grid-main_content {
width:80%;

【讨论】：

是的，我也加了这个代码+宽度，但是Artur代码中宽度不清楚。