如何将类删除到可排序的类时将类添加到克隆的div中

时间:2014-08-11 07:32:00

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

我想在每个克隆版本中添加一些类“mydraggable'当它被放入可排序的内部时。但我不知道如何实现这一目标。我还希望将mydraggable的删除克隆作为可排序的,这样如果我在新克隆的内部droppable中删除一些内容它应该与父类sortable相同。

以下是我的HTML

<div id="mydraggable"  >I am First<span class="myhandler">DRAG<span></div>
<div id ="sortable" class="mysortable" contenteditable="true"></div>

以下是我的JS

  <script>


   $('#mydraggable').draggable({
   connectToSortable: ".mysortable",
  helper: "clone",
  revert:"invalid",
   });

 $( ".mysortable" ).sortable({ 
    placeholder: "highlight_me",
    cursor: "move",
    handle: ".myhandler",
    revert: true,
    receive:function(event , ui){
        alert($(this).html());
        //$(this).addClass('ui-sortable');
    }
});    

2 个答案:

答案 0 :(得分:0)

您需要使用:

$(ui.item).addClass("ui-sortable");

完整代码:

$( ".mysortable" ).sortable({ 
 placeholder: "highlight_me",
 cursor: "move",
 handle: ".myhandler",
 revert: true,
 receive:function(event , ui){
    $(ui.item).addClass("ui-sortable");
}});    

答案 1 :(得分:0)

您可以使用ui.item访问要删除的项目,并添加类似

的类
$(ui.item).addClass('ui-sortable');

如果我理解正确,您需要使用refresh方法,以便识别可排序的新添加项目。

这样的东西
$( ".mysortable" ).sortable({ 
  placeholder: "highlight_me",
  cursor: "move",
  handle: ".myhandler",
  revert: true,
  receive:function(event , ui){
    alert($(this).html());
    $(ui.item).addClass('ui-sortable');
    $(this).sortable("refresh");
 }
}); 

Demo