jQuery/js Mouse drag select code (No plugin required!)

Here is a nifty script to allow you to drag mouse-down over html tables. Works for any sort of table as long as you specify the tr's.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script type="text/javascript">
    
 $(function () {
      var isMouseDown = false;
      $("#yourTableId tr").not(":first")
        .mousedown(function () {
          isMouseDown = true; 
 
 // Put your mouse-down logic here (i.e. highlighting the tr)
 
          return false; // prevent text selection
        })
        .mouseover(function () {
          if (isMouseDown) {
 
  // Put your drag-over logic here (i.e. highlighting the tr)
 
          }
        })
        .bind("selectstart", function () {
          return false; // prevent text selection in IE
        });

      $(document)
        .mouseup(function () {
          isMouseDown = false;
        });
    });
</script>

Posted in: Code, JQuery