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

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

我有一个500x500网格，正方形为10x10（示例-）

网格代码：

      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);

我在谷歌上找到了一些快照代码，但我确实被卡住了（我是JQuery的完全初学者）

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

• 如果您想建议一种不同的方法，请提供一些背景信息：这适用于运行python和django内置SQL server的网站。它输出的数据是jSON对象，但在其他方面，我只是使用html、css和JavaScript/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();
            });

        });

    });

$（窗口）.load（函数（）{
变量工具提示=$（''）.appendTo（'body'）[0]；
$（'.coords'）。
每个（函数（）{
var pos=$（this）.offset（），
顶部=位置顶部，
左=位置左，
宽度=$（this）.width（），
高度=$（this）.height（）；
美元（本）。
mousemove（函数（e）{
var x=（（e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft）-左）。toFixed（0），
y=（（e.clientY+document.body.scrollTop+document.documentElement.scrollTop）-top））.toFixed（0）；
$（工具提示）.text（x+，'+y）.css({
左：e.clientX+20，
排名：e.clientY+10
}).show（）；
}).
mouseleave（函数（）{
$（工具提示）.hide（）；
});
});
});

我建议您使用jQuery UI插件，它的使用非常简单。请看一下这个小把戏：

HTML

CSS:

---

我建议您使用这个插件jQuery UI，它的使用非常简单，请看一下这个小玩意儿：

HTML

CSS:

---

如果我正确理解了你的问题，你就不需要jQueryUI了。 您需要在mousemove上找到捕捉到网格单元格的鼠标位置，并调整选择矩形的大小

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

---

这里有一个例子-

如果我正确理解了你的问题，你就不需要jQueryUI了。 您需要在mousemove上找到捕捉到网格单元格的鼠标位置，并调整选择矩形的大小

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

---

下面是一个例子-

这几乎就是我想要的，但可能我还不够清楚，我现在要通读一下jQuery UI的api，尽管如此，谢谢：）只是为了澄清一下，我基本上希望能够从网格上鼠标向下的位置绘制一个选择框（捕捉到最近的10x10）鼠标在网格上的位置（再次捕捉）。。。然后吐出坐标。顺便说一下，要在应用程序中使用它，您必须导入jQuery库和jQuery UI（），这几乎就是我想要的，但可能我还不够清楚，我现在将通读jQuery UI的api，不过谢谢：）只是为了澄清一下，我基本上希望能够绘制一个选择框，从鼠标在网格上的位置（捕捉到最接近的10x10）到鼠标在网格上的位置（再次捕捉）。。。顺便说一下，要在应用程序中使用它，您必须导入jQuery库和jQuery UI（），这非常有效！非常感谢。你知道会发生什么吗？如果有一种方法可以使选择框可以绘制在其他方向，而不是向下和向右？这是完美的作品！非常感谢。你知道如果有一种方法可以使选择框可以在除向下和向右以外的方向上绘制，会发生什么吗？

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

.snap-box {
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 10;
}

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