jquery sortable : 현재 드래그 항목의 CSS를 변경합니다.

Question

jquery-ui를 사용하여 정렬 가능하며 드래그 할 때 드래그 한 항목 모양을 변경하는 데 문제가 있습니다. 내가 원하는 것은 드래그 할 때 빨간색 bg 컨테이너 안의 컴포넌트의 텍스트 값입니다. 제발 도와주세요

여기는 내가 지금까지 가지고있는 것입니다 http://jsfiddle.net/Fyd48/5/. 이것은 약 90 % 일하고 있습니다. 내가 그것을 원한다면 super dooper을 드래그하면 bg 컬러가 빨강으로 표시되지만 회색 상자가 여전히 남아있어 이상하게 보입니다. , 그 회색 상자가 어디서 왔는지는 모르지만 그것을 제거하는 것을 도와주세요. 당신은 드래그 할 때 회색 상자가되지 않습니다 그것을 제거하는 경우

$("#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(); 

Answer 1

당신은, 당신의 드래그 된 div의 각 CSS 스타일로 background-color: rgb(245, 245, 245); 있습니다.

바이올린 : http://jsfiddle.net/Fyd48/10/

Answer 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에 100%에 height 및 width을 설정하십시오 :

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

(물론 더 나은 대신 인라인 스타일을 필요없이, 스타일 태그에 스타일 속성을 넣어)