1

並べ替え可能なリストと、リストの要素をゴミ箱にドロップすると、要素が削除されるドロップ可能な「ゴミ箱」があります

drop:function (event,ui) {

$(ui.draggable).remove();

}

これはうまくいきます。ただし、削除する前に要素をフェードアウトしたい。だから私はフェードアウトを行い、コールバックで remove を呼び出します。

drop:function (event,ui) {
$(ui.draggable).fadeOut( "slow", function() {
$(this).remove();
});
}

それを行うと、要素はフェードアウトしますが、リストはソートできなくなります。コンソールには何も報告されません。

私はデモンストレーションのためにフィドルを作りました:

http://jsfiddle.net/7kEn8/

最初（青）のビンにドロップすると通常どおり削除され、2番目（黄色）のビンにドロップするとアイテムがフェードアウトすると、リストはソートできなくなります。本当に基本的なものが欠けていると確信していますが、何がわかりません。フィドルはfadeOutメソッドを使用します。私は jquery ui でも試しましaddClassた。読んでくれてありがとう！

4

2 に答える 2

0

編集：タイラーの改訂後、これは私にとって最良の方法のように見えます。重要なのはフェードアウトすること$(ui.draggable)ですが、削除すること$(ui)です：

    drop:function (event, ui) {
        $(ui.draggable).fadeOut("slow", function() {
            $(ui).remove();
        });
    }

解決策を見つけましたが、必要ないと思うので好きではありません。適切な効果は、要素のクローンを作成し、オリジナルを削除し、クローンをオリジナルと同じ位置に配置してから、クローンをフェードして削除することで実現されます。

drop:function (event, ui) {

    var coords = $(ui.draggable).offset();
    //clone the object
    var theClone = $(ui.draggable).clone();
    theClone.css('list-style-type', 'none');
    $(document.body).append(theClone);
    theClone.offset({top: coords.top, left: coords.left});
    //remove the element
    $(ui.draggable).remove();
    //fade the clone
    theClone.fadeOut("slow", function() {

        //remove in the callback
        theClone.remove();

    });

}
于 2013-11-12T18:51:13.440 に答える