1

jQuery UI draggable+sortable を使用すると、ドラッグ可能な要素がソート可能にドロップされると css が失われます。これが私のコードで、これがjsフィドルのデモです

ドラッグ可能な div を sortable に配置してみて、(この場合は) 背景色と境界線が失われることを確認してください。これを防ぐことは可能ですか？

<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>
4

2 に答える 2

0

ドラッグすると 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/

于 2013-02-18T07:02:26.107 に答える
0

または、他の目的で ID が必要な場合は、次のコードを並べ替え可能な呼び出しに追加できます。

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

更新されたフィドル: http://jsfiddle.net/y6KHn/5/

jquery: ドラッグ可能なクローン ID を更新する方法を参照してください。

于 2013-02-18T07:27:39.650 に答える