Question

我正在跟踪jquery ui docs以使div可拖动并可排序。它确实适用于拖动和排序。但是当我从可拖动的div中取出一个div时，draggable的宽度会改变，并且不会保留它应该的宽度。

以下是demo

JS：

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

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

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

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

Answer 1

你可以使用draggables＆＃39; start event，以维护帮助

的特定样式

$('#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

Answer 2

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

即可

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

你没有添加CSS

Answer 3

我只是创建一个Codepen demo

任何方式都要看一下，如果它似乎有效，请复制代码。

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

#grid-main_content {
width:80%;

jquery ui draggable自动更改宽度

3 个答案: