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

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>
   

   所以你需要rel为h3元素设置，但你的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.dropand存在问题droppable.out- 它们不会捕获拖放到列表开头或末尾的可放置对象的事件（我怀疑这是因为必须将可放置对象拖放到*到*列表中才能触发事件，并且如果您将它放在列表的开头/结尾，它实际上是一个新位置并且不在列表中）。
   所以，我们可以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以获得有效的解决方案。