web-dev-qa-db-ja.com

JavaScriptのドラッグアンドセレクト機能が正しく実行されます

HTMLとJavaScriptを使用してドラッグアンドセレクト機能を作成しようとしています。つまり、任意の絶対位置を持つオブジェクトのセットが存在するということです。それらが配置されている領域にカーソルをドラッグできるようにしたい。これは、RTS戦略（単位の選択）または任意のベクターグラフィックエディター（オブジェクトの移動と編集のためのオブジェクトの選択）と考えてください。

まず第一に、私はグーグル＆SOの最初の数ページに出てくるものを知っています。したがって、私は決してそれらのものをグーグルで検索して、ここにいくつかのランダムなリンクを投稿することを求めているわけではありません。

私が見つけた解決策のほとんどは、何らかの形で欠陥があります。主な問題は、実際のテキスト選択を抑制することです。これは、Webブラウザの性質そのものに反しているように見えます。いくつかのコードスニペットは、私が非常に迷惑だと思う選択のきらめきを引き起こします。一部のブラウザは、すべての主要なブラウザで適切に動作しません。

実際に使用した、または正常に使用されたと見なされたコード/ライブラリの推奨事項を求めています。

2つ目は、選択を抑制する背後にあるJavaScriptの内部を実際に理解したいということです。理論的にはどのようにすべきか。それを達成するための非ハックな方法はありますか？

私が見つけた最も近いものはこれです： http://view.jquery.com/tags/ui/1.5b2/demos/ui.selectable.html

ただし、jQuery UIと緊密に結合されているようです。これには、jQuery 1.3.xが必要ですが、jQuery1.5の使用を本当に楽しみにしていました。

javascriptjqueryjquery-uiselectiondrag
14
julkiewicz

私の英語について申し訳ありません。私はこのライブラリをドラッグアンドドロップに使用していますが、それは素晴らしいことです。それが必要かどうかはわかりませんが、役立つ可能性があります。

http://threedubmedia.com/code/event/drop/demo/selection

http://threedubmedia.com/code/event/drag

http://threedubmedia.com/code/event/drop

22
morgar

主な問題は、実際のテキスト選択を抑制することです。これは、Webブラウザの性質そのものに反しているように見えます。

探している関数はe.preventDefault（）;です。

$("#inputform").mousedown(function(e){
    e.preventDefault();
    //console.log('mousedown');
}).mouseup(function(e){
    e.preventDefault();
    //console.log('mouseup');
});

これは、テキスト選択の問題を解決するだけです。 Web全体でさまざまなドラッグ選択jsスクリプトを見ることができますが、どういうわけかそれらを機能させることができません。

1
Agniva De Sarker

あなたの質問が正しかったかどうかは100％わかりません。しかし、私はあなたが説明するケースを処理する2つのプラグインを作成したと思います。それらは依存関係を必要としないので、jQueryなどは必要ありません。それらを使用しない場合でも、コードは十分に文書化されており、独自に作成することで役立つはずです。

ドラッグアンドドロップには dragNdrop があります
選択メカニズムには DragSelect があります

どういたしまして。お役に立てば幸いです。

1
chitzui

Jquery 1.5を使用したい場合でも、jquery-ui Draggableオプションを確認することをお勧めします（私があなたの欲求を解釈している方法から、これはあなたが達成しようとしていることのようです）。

http://jqueryui.com/demos/draggable/

jquery-uiは、jqueryの最新リリースに追いつくのに常に非常に高速であり、多くの場合、正常に機能します。 jquery-uiは、私が見つけた他のどのアドオンよりも、jqueryを最新の状態に保つ傾向があることがわかりました。

これをどのように行うべきかを知りたいということに関しては、jqueryの非圧縮コアをかなり簡単に調べることができます。それは非常によく文書化されており、読むのはかなり簡単です。

0
Ken I.