jquery sortable：更改当前拖动项的css答案

【问题标题】：jquery sortable: change the css of current drag itemjquery sortable：更改当前拖动项的css
【发布时间】：2013-07-05 12:44:12
【问题描述】：

我使用 jquery-ui 可排序，但我无法更改拖动项目在拖动时的外观。我想要的是拖动时红色 bg 容器内组件的文本值。请帮忙

这是我目前得到的http://jsfiddle.net/Fyd48/5/。这大约是 90% 的工作。如果你拖动super dooper，它的背景颜色是我想要的红色，但它周围仍然有灰色框，这让它看起来很奇怪。，我不知道那个灰色的盒子是从哪里来的，但是请帮忙把它去掉。

$( "#container" ).sortable({
start: function(event, ui){        
   var text = $.trim(ui.item.text());
   ui.item.startHtml = ui.item.html();

   ui.item.html('<div style="display: inline-block;" class="rf-ind-drag default drag">' + text + '</div>');
},
stop: function(event, ui){ 
   ui.item.html(ui.item.startHtml);
}
});
$( "#container" ).disableSelection();

【问题讨论】：

标签： jquery html css jquery-ui jquery-ui-sortable

【解决方案1】：

您在每个可拖动的 div 中都有 background-color: rgb(245, 245, 245); 作为 css 样式，如果将其删除，则拖动时灰色框将不存在。

小提琴：http://jsfiddle.net/Fyd48/10/

【讨论】：

【解决方案2】：

灰色背景来自这些 DIV：

<div style="border: 0px; background-color: rgb(245, 245, 245); padding: 0px; position: relative; background-position: initial initial; background-repeat: initial initial;" class="default ui-draggable">

您在拖动时创建的红色 DIV 比包含的 div 小，让父背景颜色显示出来。尝试在红色 DIV 上将 height 和 width 设置为 100%：

ui.item.html('<div style="display: inline-block; width:100%; height: 100%" class="rf-ind-drag default drag">' + text + '</div>');

（当然最好将样式属性放在样式标签中，而不是内联样式）

【讨论】：

谢谢您，我尝试了您的建议，但现在如果我尝试使用非常长的标签，长标签会出现在盒子外面。请帮我解决。这是 jsfiddle：jsfiddle.net/Fyd48/11
您好，尝试仅将高度设置为 100%，删除 width: 100% 部分。