jQuery UI可拖曳+排序保持可拖拽的css

Question

當使用jQuery UI可拖曳+排序時，可拖曳元素在放入可排序時丟失了css。這裏是我的代碼，這裏是一個js fiddle demo

嘗試將可拖動的div放入可排序的列表中，並看到它丟失了（在本例中）背景顏色和邊框。是否有可能防止這種情況發生？

<script> 
    $("#content").sortable({ 
     revert:true 
    }); 
    $("#draggable").draggable({ 
     connectToSortable: "#content", 
     revert: "invalid", 
     stop: function(event,ui) { 
     $(ui.item).attr('id','draggable'); 
     } 
    }); 
</script> 
<style> 
#content {width:150px;} 
#draggable { 
    width:50px; 
    height:50px; 
    border:1px solid red; 
    background-color:blue;} 
.text { 
    min-height:100px; 
    width:100%; 
    border:1px solid red; 

    background-color:red; 
} 
</style> 
<div id="content"> 
    <div class="text">Item</div> 
    <div class="text">Item</div> 
    <div class="text">Item</div> 
    <div class="text">Item</div> 
    <div class="text">Item</div> 
    <div class="text">Item</div> 
</div> 

Answer 1

或者，如果你需要做別的ID，您可以添加以下代碼到您的可排序電話：

beforeStop: function (event, ui) { 
     newItem = ui.item; 
    }, 
    receive: function(event,ui) { 
     $(newItem).attr("id","draggable");  
    } 

更新小提琴：「克隆」`或返回一個DOMElement拖動時將要使用的功能：http://jsfiddle.net/y6KHn/5/

看到jquery: how to update draggable clone id?

Answer 2

該ID將通過拖動而丟失。您可以通過將CSS附加到類來解決此問題。
在你的HTML：

<div id="draggable" class="dragclass">Drag</div> 

並在CSS：

.dragclass { 
    width:50px; 
    height:50px; 
    border:1px solid red; 
    background-color:blue;} 

看到更新的小提琴： http://jsfiddle.net/y6KHn/2/