将类拖放到可排序时如何将类添加到克隆的 div答案

【问题标题】：How to add class to the cloned div when it is dropped to the sortable将类拖放到可排序时如何将类添加到克隆的 div
【发布时间】：2014-08-11 07:32:00
【问题描述】：

当“mydraggable”被放入可排序对象时，我想为每个克隆添加一些类。但我不确定如何实现这一点。我还想将 mydraggable 的删除克隆设置为可排序的，这样如果我将某些内容放在新克隆的 droppable 内部，它的功能应该与父可排序相同。

以下是我的 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');
    }
});

【问题讨论】：

标签： jquery jquery-ui draggable jquery-ui-sortable

【解决方案1】：

你需要使用：

$(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");
}});

【讨论】：

感谢您的解决方案，但 sortable 中新制作的 div 的功能不像原来的那样。我希望即使是 sortable 中新制作的 div 也应该与 parent 的行为相同。
@ShivekParmar：你的意思是应该采取同样的行动。如果它的事件与父母的事件大致相同，那么您需要在接收后绑定事件。
我希望放置的元素能够接受放置在其中的克隆。如果您可以演示小提琴选项，那就太好了。
这是我的小提琴FIDDLE。我希望它在被丢弃时也应该能够像它的父级一样接受。
该类被添加到原始的可拖动对象中，但我希望仅当在可排序对象中删除该类时才将该类添加到可拖动对象中。请帮我。我坚持了 2 天。

【解决方案2】：

您可以使用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

【讨论】：

我已经用浏览器的inspect元素检查了元素，但没有添加类。请在小提琴上提供演示。
@ShivekParmar 如果您正在收听接收，那么它似乎第一次无法正常工作。您可以使用update 代替this （在更新之前调用receive，ui 可能没有完成某些事情，仍然不确定为什么它第一次单独不起作用......）
感谢您的回复和小提琴，但我们可以在删除新元素后这样做，新元素能够接受其他元素。
@ShivekParmar 您问题中的可拖动对象仅包含一些文本。你如何在文本之间拖动一些东西..？请正确更新问题...
这是我想要的现场示例网站。但我不知道如何实现它.. Layoutit。看看我们何时删除任何新的列元素，然后它们能够接受像其父元素这样的新元素。