Highlighting table cells on mouse drag

Question

I am new to Javascript/JQuery. I want to know how I could modify table cell highlighting shown here http://jsfiddle.net/Brv6J/ with a modification that will allow selection in a square pattern.

For example, consider A, B, C, D, G, H and I as table cells. Dragging the mouse along the diagonal from A to E should select cells A,B,D & E

A B C 
D E F 
G H I

For that you need to calculate first (A) and last element (E) with neighbor element. If anyone neighbor found then it should be seleted.. for eq. If you goed A to E then Neighbour of A means A+1= B it selected then (E-1)=D should be involved into selection. convert all box into ASCII character then calculate it. — Abhishek B., Mar 06 '12 at 06:01
Is your layout fixed or variable?. In case if you have 4x4 matrix then? what would be output.. A B C D | E F G H | I J K L | M N O P Then drag from F -> O then what will be highlighted? — Abhishek B., Mar 06 '12 at 06:51

arunes · Answer 1 · 2012-03-06T07:26:00.073

I wrote script before for calendar select. I hope this is helpful for you.

Script:

$(function () {
    $("#table td")
        .mousedown(rangeMouseDown)
        .mouseup(rangeMouseUp)
        .mousemove(rangeMouseMove);
});

var dragStart = 0;
var dragEnd = 0;
var isDragging = false;

function rangeMouseDown(e) {
    if (isRightClick(e)) {
        return false;
    } else {
        var allCells = $("#table td");
        dragStart = allCells.index($(this));
        isDragging = true;

        if (typeof e.preventDefault != 'undefined') { e.preventDefault(); } 
        document.documentElement.onselectstart = function () { return false; };
    } 
}

function rangeMouseUp(e) {
    if (isRightClick(e)) {
        return false;
    } else {
        var allCells = $("#table td");
        dragEnd = allCells.index($(this));

        isDragging = false;
        if (dragEnd != 0) {
            selectRange();
        }

        document.documentElement.onselectstart = function () { return true; }; 
    }
}

function rangeMouseMove(e) {
    if (isDragging) {
        var allCells = $("#table td");
        dragEnd = allCells.index($(this));
        selectRange();
    }            
}

function selectRange() {
    $("#table td").removeClass('selected');
    if (dragEnd + 1 < dragStart) { // reverse select
        $("#table td").slice(dragEnd, dragStart + 1).addClass('selected');
    } else {
        $("#table td").slice(dragStart, dragEnd + 1).addClass('selected');
    }
}

function isRightClick(e) {
    if (e.which) {
        return (e.which == 3);
    } else if (e.button) {
        return (e.button == 2);
    }
    return false;
}

CSS:

#table { border:1px solid #ccc; }
#table td { padding:50px; }
#table td.selected { background-color:#ccc; }

HTML:

<table id="table">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>D</td>
    <td>E</td>
    <td>F</td>
  </tr>
  <tr>
    <td>G</td>
    <td>H</td>
    <td>I</td>
  </tr>
</table>

I create fiddle at http://jsfiddle.net/5VXDt/1/

Script can be improved with adding click event deselect or select one cell.

@arunes this is absolutely amazing.. any way to modify this so it doesn't fill the entire row when you move down? I'm trying to do something that follows square x/y coordinates — xxstevenxo, Aug 04 '15 at 21:58

score 4 · Answer 2 · answered Mar 27 '12 at 18:41

4

JQuery Selectable probably fits the requirements better.

answered Mar 27 '12 at 18:41

Snives

1,226
11
21

Yes, you're right!I used selectable as in this example: http://stackoverflow.com/questions/9796699/jquery-ui-selectable-plugin-multiple-mouse-drag-selection-and-unselect-option. But I am constrained by not being able to deselect multiple cells on mouse drag (can deselect only one cell at a time). Any thoughts on this issue? – Deepa Thalikar Mar 27 '12 at 22:08
1

Good solution, jQuery( "table" ).selectable({filter: 'td'}); will enable both horizontal and vertical (that is true square) selection of table cells. http://jsfiddle.net/fq941d4L/ – Fanky Dec 29 '16 at 16:36

score 1 · Answer 3 · answered Mar 06 '12 at 07:36

1

You can use jquery jquery.ui.draggable.js

 $('td').draggable({
    start  : function (event, ui) {
        // highlighting code
     },
     stop : function (event, ui) {
        //restore the highlighting code
     }
});

answered Mar 06 '12 at 07:36

codef0rmer

10,284
9
53
76

@Arunes, thanks for working out the solution. I am a new-bie to Javascript. I actually want a couple of changes- 1. The selection should persist on mouseup, which means that suppose I select a set of cells and then move to a different location and select another unconnected cell(s), the previous selection should not get deselected. 2. When I drag the mouse from A to E, I don't want C to get selected (only A, B, D & E are to be selected)Is that do-able? – Deepa Thalikar Mar 08 '12 at 17:33

Highlighting table cells on mouse drag

3 Answers3