1

フォルダーにドロップしたい画像を含むドラッグ可能なものがいくつかあります。スペースを節約する (そして一度により多くのドラッグ可能要素を画面に表示する) ために、ドラッグ中は CSS で画像を非表示にしています。画像が消えたときにマウスをドラッグ可能に保つにはどうすればよいですか?

シンプルなドラッグ可能なボックスを使用するだけで、私が見ているものの例を次に示します。

$( "#draggable" ).draggable({
    revert: "invalid",
    cursor: "move",
    scroll: false,
    cursorAt: { top: 5, left: 5 },
    start: function(event, ui) {
        $('img').addClass('hidden');
    },
    stop: function(event, ui) {
        $('img').removeClass('hidden');
    }
});

http://jsfiddle.net/fBPdF/

このhiddenクラスはdisplay:none;、画像を非表示にするために使用します。フィドルでわかるように、最初の画像のドラッグは正常に機能し、ドラッグ中はマウスがボックスの左上隅に沿って移動します。2 番目をドラッグすると、画像が削除されるときに cursorAt 値が既に設定されているため、マウスが横に浮きます。

ヘルパー クローンを使用したくないのですが (移動がコピーのように見えるため)、これが機能させる唯一の方法です。start関数のタイムアウト内でcursorAtをリセットしてみましたが、効果がないようでした。

どうにかしてカーソルとドラッグ可能なものを一緒に保つ方法はありますか?

4

1 に答える 1