Javascript 选择表格套索样式中的单元格

Question

我是 Javascript 的新手，在创建套索样式的表格选择工具时遇到了问题。

基本上，我希望能够将鼠标拖到表格上并突出显示该区域中的所有单元格，以便稍后我可以对选定的单元格执行某些操作。

这是我想要实现的一个非常有问题的 fiddle 。 http://jsfiddle.net/kooldave98/ad5Z9/

var element = $("#rectangle");
// on mousedown
$(window).mousedown(function (e1) {
    // first move element on mouse location
    element.show().css({ top: e1.pageY, left: e1.pageX });
    // resize that div so it will be resizing while moouse is still pressed
    var resize = function (e2) {
        // you should check for direction in here and moves with top or left
        element.width(e2.pageX - e1.pageX);
        element.height(e2.pageY - e1.pageY);
    };
    $(window).mousemove(resize);
    // and finally unbind those functions when mouse click is released
    var unbind = function () {
        $(window).unbind(resize);
        $(window).unbind(unbind);
    };
    $(window).mouseup(unbind);
});

我需要能够在表格内的任何方向移动选择工具，然后使用“ctrl”键选择其他单元格。

任何帮助将不胜感激。

Answer 1

您可以使用 jQuery UI 执行此操作 Selectable小部件。