3

jQueryUIの並べ替え可能なポートレットを使用しています。jqueryuiの並べ替え可能なページは、以下に示すように、ポートレットが1つの列から別の列に移動された場合に、イベントハンドラーがアタッチされているドキュメントを参照します。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関数は、要素が同じ列で上下に移動した場合にログに記録されると思いました。しかし、これは起こりません。

したがって、1つのポートレットが同じ列内で上下に移動したときにイベントを取得するにはどうすればよいですか。

簡単なフィドルがここにあります。

4

4 に答える 4

3

同じ列であっても、並べ替え可能な要素の位置が更新されたときにトリガーされる変更イベントを探しているようです。

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

私はあなたのスニペットをあなたの要件に合わせてフォークしました.目的のためにのみ変更イベントを使用します.

ここでのコツは、変更前と変更後のポートレットの列を追跡することです。(関数を介して行われhasColumnChangeます)

change イベントを使用することの欠点は、2 回発生するように見えることです。理由はわかりませんが、満足できるはずです。

于 2012-07-15T10:12:59.613 に答える