2

私のコードに四角形のドラッグを追加したいのは、フィドルhttp://jsfiddle.net/cyTUX/39/です。このコードはオンクリックで状態を変更し、3 つの状態があるため、状態を選択してドラッグするとテーブルセルの周りにドラッグすると、ドラッグに関係するセルがその状態になります。

だから、私が望むのは、そのように選択してドラッグする代わりに、状態を選択して長方形のようにドラッグして、長方形内のすべてのテーブルセルがその状態になるようにすることです。

これを行う方法に関するアイデアや例はありますか?

4

3 に答える 3

2

だから私は電子アプリを書いていて、まったく同じ問題を抱えていました。jQuery を使いたくなかったので、自分で何かを書きました。書くのにかなり時間がかかったので、自分で簡単に使えるプラグインを作りました。それは超小型で、まさにそれを行います。私はそれをDragSelectと呼び、Github から入手できます。

これの優れた点は、依存関係がないため、好きなフレームワークで使用できることです。

選択アルゴリズムは魅力的に機能し、修飾キーを使用した独立した複数選択を無料で提供します.

したがって、github readmeから取得:

1. インストール

簡単

ファイル（縮小版）をダウンロードして、ドキュメントに追加するだけです。

<script src="https://thibaultjanbeyer.github.io/DragSelect/ds.min.js"></script>

npm

npm install --save-dev npm-dragselect

バウアー

bower install --save-dev dragselect

これで、ロックする準備が整いました。
もちろん、コード内に関数を含めてリクエストを保存することもできます。

使用法

JavaScript では、次のように単純に要素を関数に渡すことができます。

単純

選択できる要素を選択します。

var ds = new DragSelect({
  selectables: document.getElementsByClassName('selectable-nodes')
});

できることは他にもたくさんあるので、github のドキュメント全体を必ず読んでください。

楽しみ

于 2017-09-06T09:52:32.723 に答える
1

新しいdivを作成する

<div style="position:absolute;border:1px solid green;display:none" id="rectangle"></div>

そして、このようなものは、あなたがあなたの道を切り開いて、それを終わらせることができることを願っています。

var element = $("#rectangle");
// on mousedown
$(window).mousedown(function(e1){ 
   // first move element on mouse location
   element.show().css({top:e1.pageY, left:e1.pageX});
   // resize that div so it will be resizing while moouse is still pressed
   var resize = function(e2) {
       // you should check for direction in here and moves with top or left
      element.width(e2.pageX - e1.pageX);
      element.height(e2.pageY - e1.pageY);
   };
   $(window).mousemove(resize);
   // and finally unbind those functions when mouse click is released
   var unbind = function() {
       $(window).unbind(resize);
       $(window).unbind(unbind);
   };
   $(window).mouseup(unbind);
});

このようにドラッグして長方形を作成できますが、左から右の方向にのみ、ここで例を見ることができます http://jsfiddle.net/dXduv/1 イベントから実際の位置を取得して、どのdivが内側にあり、どれが外側にあるかを計算できますエリア

于 2012-08-16T02:19:23.317 に答える
0

jQuery UIには、選択、ドラッグ アンド ドロップ、サイズ変更、および選択を処理する機能があります。すでに jQuery を使用している場合、jQuery UI の追加は非常に簡単です。また、フォームをすばやく簡単に作成できるように、あらかじめ作成された多くの UI 要素が含まれていることもわかります。jQuery UI ( Kendo UIもチェックしてください) のような別のライブラリを使用することは、多くの場合、このような複雑な Javascript 機能を自分でコーディングしようとするよりもはるかに簡単です。時間を節約し、より機能的な製品を手に入れることができます。

特にjQuery UIからのこの例は、あなたに役立つかもしれません。

于 2012-08-16T02:15:26.860 に答える