Question

我已经基本上通过javascript增加了网页上的光标图标大小，我有一张桌子。现在我希望表格中所有重叠的元素都带有光标图标来改变它们的背景颜色（点击和拖动时）。这意味着更改mousedown或mouseover当前能够选择的区域，并且能够选择多个元素。有没有办法做到这一点，如果是这样的话？

以下是点击代码：

     $('td').on('mousedown', function (e1) {
    loop();
    flag = 1
    $('td').on('mousemove', function (e2) {
        console.log(document.elementsFromPoint(e2.pageX, e2.pageY))
        if (flag == 1) {
            var tableCell = $(this);
            var setbox = $('.active').attr('id');
            //document.getElementById("tableBack").style.cursor="move";
            switch (setbox) {
                case "lPark":
                    //$(this).text('P');
                    $(this).css('background-color', 'green');
                    break;
            }
        }
    }
}

以下是增加光标大小的代码：

var cursor = document.createElement('canvas'),
ctx = cursor.getContext('2d');

cursor.width = 100;
cursor.height = 100;
var centerX = cursor.width / 2;
var centerY = cursor.height / 2;
var radius = 40 ;

ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'green';
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
//document.getElementById("tableBack").style.cursor="move";
// set image as cursor (modern browsers can take PNGs as cursor).
document.getElementById("tableBack").style.cursor = 'url(' + cursor.toDataURL() + '), auto';

这是我想要做的事情的图片

http://imgur.com/a/i3pEp（抱歉，我没有足够的积分来嵌入）

注意光标是如何超过4个单元格但只有1个被选中，我想选择全部4个。

Answer 1

我试图了解你的查询。看，你当然可以做一件事。

有很多方法可以做到这一点。但是，这是我建议的一种算法。

1) capture ctrl key pressed event and save a flag value (suppose boolean) in some hidden field say x;
  1.1) On Key down save true in x
  1.2) On Key up save false in x
2) now while it is running caputre your mouse click on cell
  if( x==true)
      add some highlight class on that cell (which is clicked)
  else
      remove some highlight class on that cell
3) now for you entire table/grid you have got your highlighted class on items you've selected

每个阶段都可以根据要求进行编码。我希望它可以给你一些想法。

有没有办法用单个javascript点击选择多个表格单元格？

1 个答案: