1

我想在 mousedown 上创建一个矩形，它拖过一个网格并在 mouseup 上保持在那里，捕捉到网格线并输出它的位置（x1，x2，y1，y2）的左上角和右下角的坐标。对于开始构建它的任何帮助将不胜感激。

我有一个 500x500 的网格，正方形为 10x10（例如 - 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; 
  }

我通过谷歌http://jqueryui.com/draggable/#snap-to找到了一些捕捉代码，但我确实被卡住了（我是 JQuery 的完整初学者）。

或者，如果有人对如何做到这一点有更好的想法，那将非常受欢迎。

  • 如果您想提出一种不同的方法，请提供一些背景知识：这是针对使用 python 和 django 构建的 SQL 服务器运行的网站。它输出的数据是 jSON 对象，但我只是在前端使用 html、css 和 javacript/jQuery。- 不确定该信息是否有用。

编辑在 jQuery 中为鼠标悬停网格坐标添加了代码

    $(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 回答