1

グリッドを横切ってドラッグし、マウスアップでそこにとどまり、グリッド線にスナップし、その位置の左上と右下の座標を出力するマウスダウンで長方形を作成したい(x1、x2、y1、y2)。これを構築し始める際の助けをいただければ幸いです。

10x10 の正方形の 500x500 グリッドがあります (例 - jsFiddle )。

グリッド コード:

      function creategrid(size){

          var standardW = Math.floor((500) / size),
              standardH = Math.floor((500) / size);

          var standard = document.createElement('div');
              standard.className = 'grid';
              standard.style.width = (standardW * size) + 'px';
              standard.style.height = (standardH * size) + 'px';

            for (var i = 0; i < standardH; i++) {
                for (var p = 0; p < standardW; p++) {
                  var cell = document.createElement('div');
                      cell.style.height = (size - 1) + 'px';
                      cell.style.width = (size - 1) + 'px';
                      cell.style.position = 'relative'
                      cell.style.zIndex= '2';
            standard.appendChild(cell);
                }
            }

          document.body.appendChild(standard);
      }

      creategrid(10);

グリッドの CSS:

  .grid {
    margin: 0px auto auto;
    border: 1px solid #000;
    border-width: 0 1px 1px 0;
    background-color: #CCC;
  }

  .grid div {
    border: 1px solid #000;
    border-width: 1px 0 0 1px;
    float: left;
  }

  #tooltip { 
    text-align:center; 
    background:black; 
    color:white; 
    padding:3px 0; 
    width:150px; 
    position:fixed; 
    display:none; 
    white-space:nowrap;
    z-index:3; 
  }

Google http://jqueryui.com/draggable/#snap-toでいくつかのスナップ コードを見つけましたが、文字通り立ち往生しています (私は JQuery の完全な初心者です)。

あるいは、これを行う方法についてより良いアイデアを持っている人がいれば、それは大歓迎です。

  • 別の方法を提案したい場合の背景: これは、python と django で構築された SQL サーバーで実行されている Web サイト用です。それが出力するデータは JSON オブジェクトですが、それ以外はフロント エンドに html、css、および javacript/jQuery を使用しています。-- その情報が役に立つかどうかはわかりません。

jQueryのマウスオーバーグリッド座標のEDIT追加コード

    $(window).load(function() {
        var tooltip = $('<div id="tooltip">').appendTo('body')[0];

        $('.coords').
        each(function() {

            var pos = $(this).offset(),
                top = pos.top,
                left = pos.left,
                width = $(this).width(),
                height = $(this).height();

            $(this).
            mousemove(function(e) {
                var x = ((e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft) - left).toFixed(0),
                    y = (((e.clientY + document.body.scrollTop + document.documentElement.scrollTop) - top)).toFixed(0);

                    $(tooltip).text( x + ', ' + y).css({
                        left: e.clientX + 20,
                        top: e.clientY + 10
                    }).show();

            }).

            mouseleave(function() {
                $(tooltip).hide();
            });

        });

    });
4

2 に答える 2

5

私があなたの質問を正しく理解していれば、そのために jQueryUI は本当に必要ありません。mousemove でグリッドのセルにスナップされたマウスの位置を見つけ、選択範囲のサイズを変更する必要があります。

function getMousePos (e) {
  return {
    'left': Math.floor((e.pageX - gridOffset.left) / cellSpacing) * cellSpacing,
    'top': Math.floor((e.pageY - gridOffset.top) / cellSpacing) * cellSpacing
  }
}

ここに例があります - http://jsfiddle.net/4efTV/

于 2013-01-29T03:56:37.603 に答える
2

そのプラグイン、jQuery UI を使用することをお勧めします。使い方は本当に簡単です。このフィドルを見てください: http://jsfiddle.net/promatik/hBQxb/

HTML

<div class="snap-box">snap box</div>

Javascript:

$( ".snap-box" ).draggable({ grid: [ 10,10 ] });

CSS:

.snap-box {
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 10;
}
于 2013-01-29T02:34:37.970 に答える