列排序中的jqueryui portlet

我正在使用jQueryUI。jqueryui可排序页面指的是文档，其中附加了事件处理程序。如果Portlet从一列移动到另一列，recieve函数将处理这些内容，如下所示：

 $( ".column" ).sortable({
        connectWith: ".column",
        placeholder: 'ui-state-highlight',
        handle: 'h6',
        revert: true,
        receive: function(event, ui) {
         console.log(ui.item);
        }, 
         over: function(event, ui){
             console.log(ui.item);
        }

如上所述的

over

函数，我认为如果元素在同一列中上移/下移，它会记录日志。但事实并非如此

那么，当一个portlet在同一列中上移/下移时，如何获取事件呢

---

一把简单的小提琴就可以了

您似乎在查找事件，该事件在可排序元素的位置更新时触发，即使在同一列中：

$(".column" ).sortable({
    connectWith: ".column",
    placeholder: "ui-state-highlight",
    handle: "h6",
    revert: true,
    receive: function(event, ui) {
        console.log(ui.item);
    },
    change: function(event, ui) {
        console.log(ui.item);
    }
});

---

您将发现一个更新的小提琴。

排序事件似乎相当于

过

事件，但在一列中。

sort

和

change

之间的区别在于

sort

在移动元素时激发，而

change

在松开鼠标且元素固定到其位置后激发

sort : function (event, ui) {
    console.log(ui.item);
}

---

这些事件在网站上有很好的记录。仔细查看每一个选项，看看哪一个最适合您的需要。

更改功能就可以了

$( ".selector" ).sortable({
   change: function(event, ui) { ... }
});
Bind to the change event by type: sortchange.
$( ".selector" ).bind( "sortchange", function(event, ui) {
  ...
});

我有你的代码片段来满足你的要求 它仅将更改事件用于此目的

这里的技巧是在更改之前和之后跟踪portlet的列。（通过

hasColumnChange

功能完成）

---

使用change事件的缺点是，它似乎触发了两次，我不知道为什么，但它应该满足您的要求。

您实际上不必释放鼠标按钮来触发

change

事件，只需移动元素，使其同级元素重新排序即可。另一方面，在我的测试中，

sort

会在元素移动后立即触发，即使它保持相同的位置（因此经常发生）。