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

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

您的物品构造如下：
```
<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");
```

您在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的位置。如果订购并不重要，您可以将其删除。

使用droppable.drop和droppable.out时出现问题 - 他们没有捕获丢弃到列表开头或结尾的droppables的事件（我怀疑这是因为droppable必须被删除 *进入* 列表以触发事件，如果你将它放在列表的开头/结尾，它实际上是一个新的位置而不是 in 列表）。
因此，我们可以使用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了解有效的解决方案。

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

1 个答案: