Question

我正在使用jQuery UI sortable portlets。 jqueryui可排序页面指的是如果portlet从一列移动到另一列时附加事件处理程序的文档，接收函数负责处理这些内容，如下所示：

 $( ".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在同一列中向上/向下移动时，我如何得到一个事件。

一个简单的小提琴是located here。

Answer 1

您似乎正在寻找change事件，该事件在更新可排序元素的位置时触发，即使在同一列中也是如此：

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

您会找到更新的小提琴here。

Answer 2

sort事件似乎等同于over事件，但在列中。 sort和change之间的区别在于sort会在您移动元素时触发，而change会在您放开鼠标并且元素稳定到其位置后触发。 / p>

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

事件在jQuery UI pages上有详细记录。仔细查看每一个，看看哪个最适合您的需求。

Answer 3

更改功能可以解决问题。

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

Answer 4

我forked您的代码段符合您的要求它仅用于此目的的变更事件。

这里的诀窍是在更改之后跟踪portlet的列。（完成hasColumnChange功能）

使用更改事件的缺点是它似乎发射两次，我不知道为什么，但它应该让你满意。

列排序中的jqueryui portlet

4 个答案: