更改列表项容器时更改项属性(change item attribute when it change list

更改列表项容器时更改项属性(change item attribute when it change list-items container)

我有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'); } });

i have 2 sortable connected list-items and i want to make the item change his attribute when it change the list container (i mean by drag and drop the item from the first list items to the second one)and here is my code:

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

最满意答案

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

您的物品构造如下：

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

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

所以这是找到具有类item $(this) （即droppable）下的所有元素 - 它对应于所有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必须被删除*进入*列表触发事件，如果你把它放在列表的开头/结尾，它实际上是一个新位置，不在列表中。所以，我们可以使用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获取有效的解决方案。

You've made a good start, but there are a few things that need correcting, and some issues you may not have realised:

Your items are constructed thus:

so you need to set the rel for the h3 element, but the code in your jsFiddle is:

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

so this is finding all the elements under $(this) (i.e. the droppable) that have the class item - which corresponds to all the li elements. You need to use:

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

Your sortable in your jsFiddle is:

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

the helper function isn't needed - you can just use helper: "clone". I have added forcePlaceholderSize: true to my solution, because it provides useful feedback to the user in showing where the droppable is going to be dropped. If ordering is not critical, you can remove it.

There is a problem with using droppable.drop and droppable.out - they do not capture events for droppables that are dropped onto the start or the end of a list (I suspect this is because the droppable has to be dropped *into* the list to trigger the events, and if you drop it at the start/end of the list, it's effectively a new position and is not within the list). So, we can use sortable instead:

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

See my jsFiddle for a working solution.

更多推荐