jQuery UI draggable + sortable keep draggable的css

时间:2013-02-18 06:37:16

标签: css jquery-ui draggable jquery-ui-sortable

当使用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>

2 个答案:

答案 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/

请参阅jquery: how to update draggable clone id?