3

我正在使用 jQuery UI可排序的 portlet。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 在同一列中向上/向下移动时，我如何获得一个事件。

一个简单的小提琴位于此处。

4

4 回答 4

3

您似乎正在寻找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);
    }
});

你会在这里找到一个更新的小提琴。

于 2012-07-10T09:39:22.140 回答
1

事件sort似乎等同于over事件，但在一个列中。和之间的区别在于sort，change它sort在您移动元素change时触发，在您放开鼠标且元素固定到其位置后触发。

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

这些事件在jQuery UI 页面上有很好的记录。浏览它们中的每一个，看看哪个最适合您的需求。

于 2012-07-10T09:51:30.923 回答
0

更改功能可以解决问题。 

$( ".selector" ).sortable({
   change: function(event, ui) { ... }
});
Bind to the change event by type: sortchange.
$( ".selector" ).bind( "sortchange", function(event, ui) {
  ...
});
于 2012-07-13T16:50:20.537 回答
0

我已经分叉了您的代码段以满足您的要求，它仅使用更改事件来达到目的。

这里的诀窍是在更改之前和之后跟踪 portlet 的列。（通过hasColumnChange函数完成）

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

于 2012-07-15T10:12:59.613 回答