Question

我有一个基于DIV的网格，我希望用户从中选择一个或多个单元格并执行某些任务。

这是网格：http://jsfiddle.net/iaezzy/be0d10mL/3/

以下是我如何获得Row和Cell的位置：

$(function() {
    $('.cell').click(function (event) {
        var rowID = $(this).parent().attr('class');
        rowID = rowID.match(/\d+/);
        var cellID = $(this).index();
        alert( "Row: " + rowID + " Cell: " + cellID );
    });
});

但是如何让它可以拖动以便可以选择多个块并获得第一个（左上角）和最后一个（右下角）的位置？

Answer 1

请参阅http://jsfiddle.net/be0d10mL/4/

使用mousedown和mouseup事件

var top, left, bottom, right;

$('.cell').on("mousedown", function (event) {
    var rowID = $(this).parent().attr('class');
    rowID = rowID.match(/\d+/);
    var cellID = $(this).index();
    top = rowID;
    left = cellID;
});


$('.cell').on("mouseup", function (event) {
    var rowID = $(this).parent().attr('class');
    rowID = rowID.match(/\d+/);
    var cellID = $(this).index();
    bottom = rowID;
    right = cellID;

    console.log("top: " + top + " left: " + left + " bottom: " + bottom + " right: " + right);
});

Answer 2

实际上，使用jQuery Selectable更容易：

$(".table").selectable({
    filter:".cell",
    stop: function() {
        var result = $( "#select-result" ).empty();
        $( ".ui-selected", this ).each(function() {
          var index = $( ".cell" ).index( this );
          result.append( " #" + ( index + 1 ) );
        });
    }    
});

从网格中选择单元格

2 个答案: