0

ブラウザの外部から Web ページにテキストをドラッグ アンド ドロップする必要がありますが、純粋なテキストを受け入れるために jQuery UI ドロップ可能を使用したいと考えています。

これはjavascriptを使用するチュートリアルで、これは私にとってはうまくいきます:

http://html5doctor.com/native-drag-and-drop/

しかし、いくつかの要素を動的に追加し、liveQuery を使用してそれらをドロップ可能にし、実装がかなり複雑になる他のいくつかのものを作成しています。

私は次のようなことを試しましたが、ドラッグ可能な要素では正常に機能しますが、プレーンテキストでは機能しません:

        $('#cointainer').livequery(function () {
            $(this).droppable({
                drop: function (event, ui) {

                    alert("dropped");
                },
                greedy: true
            });
        });

jQuery UIのドロップ可能でそれを行うことは可能ですか?

4

1 に答える 1

1

これは私が得た最も近いもので、jQueryを使用しますが、jQueryUIドロップ可能は使用しません。ハックアラウンドは、関数で実行する必要があるものをすべてラップし、このコードとjQueryを同じ要素にドロップ可能にバインドし、両方のドロップイベントから同じ関数を呼び出すことです。このようにして、ドロップ可能な要素とテキストのドロップの両方をサポートできます。

        $('#cointainer').livequery(function () {

            $(this).bind('dragover', function (e) {
                e.preventDefault(); 
            });


            $(this).bind('dragenter', function (e) {
                e.preventDefault();
            });

            $(this).bind('drop', function (e) {

                e.preventDefault(); // prevent redirect

                if (e.originalEvent.dataTransfer.getData('Text') == ':)') {
                    $(this).append('<div>You dropped a smile!</div>');
                }

                e.stopPropagation(); // prevent bubbling, without this we would get duplicate items if parent is droppable too, acts like jQuery greedy: true;
            });
        });
于 2013-01-29T17:49:27.610 に答える