12

dataTransferドラッグ アンド ドロップ シーケンス中にjQuery オブジェクトをプロパティに渡そうとしています。プロパティをjQuert.event.props配列に追加した後、それを割り当てることができますが、dropイベント中に未定義を返します。ここで何が欠けているのかわからない-本当に簡単に思えます。

Javascript:

function dragClip(clip, event){

    event.dataTransfer.el = clip;

    /* Console confirms event.dataTransfer.el is the jQuery object */
}

function dropClip(target, event){

    target.append(event.dataTransfer.el);

    /* event.dataTransfer.el no longer has the object... where'd it go?? */
}

jQuery.event.props.push('dataTransfer');

$('#titles')
    .bind('dragenter dragover', false)
    .bind('drop', function(event){

        dropClip($(this), event);
    });

$('.clip').bind('dragstart', function(event){

    dragClip($(this), event);
});

アップデート：

冗長性を削除するために書き直されました。そこには他のものが含まれていましたが、無名関数は問題なく動作します:

jQuery.event.props.push('dataTransfer');

$('#titles')
    .bind('dragenter dragover', false)
    .bind('drop', function(event){

        $(this).append(event.dataTransfer.el);
    });

$('.clip').bind('dragstart', function(event){

    event.dataTransfer.el = $(this);
});

アップデート

@barneyの最終的な回答によると、私の最終的な作業コードです。元のイベントを使用してもオブジェクトをデータとして渡すことができないことに気付いたので、代わりに ID を適用し、ドロップ時に jQuery オブジェクトを再構築しました。また、宣言された関数を取り除くことですべてを引き締めました。より少ないコード、同じ結果。

$('#titles')
    .bind('dragenter dragover', false)
    .bind('drop', function(event){

        $(this).append($('#' + event.originalEvent.dataTransfer.getData('clip')));
    });

$('.clip')
    .bind('dragstart', function(event){

        event.originalEvent.dataTransfer.setData('clip', $(this).attr('id'));
    });
4

1 に答える 1

22

個人的には、jQuery の内部をできるだけいじらず、可能な場合は元のイベント オブジェクトを抽出するようにしています。過去にドラッグアンドドロップを使用するときは、常にevent.originalEvent.dataTransfer.

于 2013-04-02T19:33:37.050 に答える