更改列表项容器时更改项目属性

Question

我有 2 个可排序的连接列表项，我想让该项目在更改列表容器时更改其属性（我的意思是将项目从第一个列表项拖放到第二个），这是我的代码：

$(".column").sortable({
    connectWith:    $(".column") ,  
    placeholder:    'widget-placeholder',   
    cursor: 'move' ,
    helper: function (evt, ui) {
        return $(ui).clone().appendTo('body').show();
    },  
    dropOnEmpty: true,  
    zIndex: 10
});

$("#column2").droppable({
    out: function( event, ui ) {
        $(ui.item).attr("rel",'0');
    },
    over: function( event, ui ) {
        $(ui.item).attr("rel",'1');
    }
  });

Answer 1

您已经有了一个良好的开端，但有一些地方需要纠正，还有一些您可能没有意识到的问题：

1. 您的物品是这样构造的：

   <li id="1" class="item">
        <h3 rel="1">item1</h3>
   </li>
   

   所以您需要为h3 元素设置rel，但是您的jsFiddle 中的代码是：

   $("#column2").droppable({
     drop: function( event, ui ) {
       $(this).find('.item').attr("rel",'0');
     }
   });
   

   所以这是在$(this)（即droppable）下查找具有item 类的所有元素 - 它对应于所有li 元素。你需要使用：

   ui.item.find("h3").attr("rel", "0");
   

2. 您在 jsFiddle 中的排序是：

   $(".column").sortable({
       connectWith:    $(".column") ,  
       placeholder:    'widget-placeholder',   
       cursor: 'move' ,
       //  utiliser helper-clone pour que le sortable n'est donc pas contenue par un volet 
       helper: function (evt, ui) {
           return $(ui).clone().appendTo('body').show();
       },  
       dropOnEmpty: true,  
       zIndex: 10
   });
   

   不需要辅助函数 - 您可以使用 helper: "clone"。我已将forcePlaceholderSize: true 添加到我的解决方案中，因为它为用户提供了有用的反馈，以显示droppable 将被丢弃的位置。如果订购不重要，您可以将其删除。

3. 使用droppable.drop 和droppable.out 存在问题-它们不会捕获拖放到列表开头或末尾的可放置对象的事件（我怀疑这是因为必须丢弃可放置对象*into* 列表以触发事件，如果您将其放在列表的开头/结尾，它实际上是一个新位置，并且不在列表中）。 所以，我们可以改用sortable：

   $(".column").sortable({
       connectWith: $(".column"),
       placeholder: "widget-placeholder",
       forcePlaceholderSize: true,
       cursor: "move",
       helper: "clone",
       dropOnEmpty: true,
       zIndex: 10
   });
   
   $("#column2").on("sortreceive", function (event, ui) {
       ui.item.find("h3").attr("rel", "0");
   });
   
   $("#column2").on("sortremove", function (event, ui) {
       ui.item.find("h3").attr("rel", "1");
   });
   

请参阅我的jsFiddle 以获得有效的解决方案。