代码之家 › 专栏 › 技术社区 › Kakar

jqueryuidraggable自动更改宽度

jquery-ui css html jquery javascript

Kakar · 技术社区 · 11 年前

我正在跟进 jquery ui docs 使divs可拖动并可排序。它确实适用于拖动和排序。但是当我将一个div从draggable改为sortable时,draggable的宽度会发生变化,并不会保持其应有的宽度。

这是 demo

js文件:

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

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

如果我检查我拖动到可排序的元素,我可以看到一个内联样式被赋予了一个宽度为(通过jquery)的可拖动块。

我如何保持该块已有的样式?非常感谢。

3 回复 | 直到 11 年前

Artur Filipiak 11 年前

你可以用拉锯 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

Steven Kaspar 9 年前

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

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

这样就不需要添加CSS