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/