Question

我想在mousedown上创建一个拖动网格的矩形，并在鼠标上保留，捕捉到网格线并输出其位置左上角和右下角的坐标（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();
            });

        });

    });

Answer 1

如果我理解你的问题，你真的不需要jQueryUI。您需要在鼠标移动时找到捕捉到网格单元格的鼠标位置，并调整选择矩形的大小。

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/

Answer 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;
}

在JQuery / Javascript中可拖动到网格的可拖动方形/矩形

2 个答案: