当使用jQuery UI draggable + sortable时,draggable元素在放入sortable时会丢失它的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>
答案 0 :(得分:1)
拖动会丢失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/
答案 1 :(得分:1)
或者如果您需要其他ID的ID,您可以将此代码添加到您的可排序调用中:
beforeStop: function (event, ui) {
newItem = ui.item;
},
receive: function(event,ui) {
$(newItem).attr("id","draggable");
}
更新了小提琴:http://jsfiddle.net/y6KHn/5/