javascript jquery ui draggable 自动更改宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32164581/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery ui draggable changes the width automatically
提问by Kakar
I am following through jquery ui docsto 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 时，可拖动的宽度会发生变化，并且不会保留其应有的宽度。
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).
如果我检查我拖动到可排序元素的元素，我可以看到内联样式被赋予具有宽度的可拖动块（通过 jquery）。
How can I maintain the style the block already has? Thank you.
如何保持块已有的样式？谢谢你。
采纳答案by Artur Filipiak
You can use draggables' startevent, to maintain specific style of the helper
您可以使用 draggables 的startevent来维护助手的特定样式
$('#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;
}
回答by Steven Kaspar
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
回答by Steven Kaspar
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%;
