jquery ui draggable自动更改宽度

I am following through jquery ui docs to make the divs draggable and sortable. And it does work for dragging and sorting. But when I take out a div from draggable to sortable, the width of the draggable changes and does not retain the width its supposed to be.

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

Here is the demo

这是演示

js:

JS：

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

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

And if I inspect the element which I dragged to the sortable, I can see that an inline style is given to the draggable block with a width (by jquery).

如果我检查我拖动到sortable的元素，我可以看到一个内联样式被赋予一个带有宽度的可拖动块（通过jquery）。

How can I maintain the style the block already has? Thank you.

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

3 个解决方案

#1

You can use draggables' start event, to maintain specific style of the helper

您可以使用draggables的start事件来维护帮助程序的特定样式

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

CSS:

CSS：

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

Demo

演示

#2

This worked for me. Just set it to the width of the draggable element

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

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

that way you don't have add the CSS

那样你就没有添加CSS了

#3

I just create a Codepen demo

我只是创建一个Codepen演示

Any way take a look at this,and copy the codes if it seems to be working.

任何方式看看这个，并复制代码，如果它似乎工作。

if you need the lower portion of the div back to its original size,Please change

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

#grid-main_content {
width:80%;

#1