How to select all cells between the start of a drag and drag in the current row, only the current selection row can be dragged

How to select all the cells between the beginning of the drag and drag the end in the current row, Drag can only be possible in the current row of the selection, it is necessary to prevent vertical drag

check my fiddle http://jsfiddle.net/kannankds/3xakkja9/3/

$(function () {
    var isMouseDown = false;
    $("#mytable td")
        .mousedown(function () {
            isMouseDown = true;
            $(this).toggleClass("hilight");
            var $this = $(this);
            parent = $this.closest('tr').get(0);
            return false; // prevent text selection
        })
        .mouseover(function () {
            if (isMouseDown) {
                $(this).toggleClass("hilight");
            }
        });
    $(document)
        .mouseup(function () {
            isMouseDown = false;
        });
});
+4
source share
2 answers

http://jsfiddle.net/3xakkja9/7/

add some changes to rio code

$(function () {
    var isMouseDown = false;
    var currentTr;

    $("#mytable td")
        .mousedown(function () {
        isMouseDown = true;

        var $this = $(this);
        currentTr = $this.parent();  //## new

        clear(currentTr)  //## clear all td hilight befor drag start

        $this.addClass("hilight");


        return false; // prevent text selection
    })
        .mouseover(function () {
        if (currentTr.get(0) != $(this).parent().get(0)) {  //## new
            return false;
        }

        if (isMouseDown) {
            $(this).addClass("hilight");
        }
    });

    $(document)
        .mouseup(function () {
        isMouseDown = false;
    });
});

function clear($tr) {
    $tr.find('td').removeClass('hilight')
}
+1
source

. , , mousedown, , , .

$(function () {
  var isMouseDown = false;
  var currentTr;    
  $("#mytable td")
    .mousedown(function () {
      isMouseDown = true;

      $(this).toggleClass("hilight");
         var $this = $(this);
         currentTr = $this.closest('tr').get(0);
      return false; // prevent text selection
    })
    .mouseover(function () {
        if( currentTr != $(this).closest('tr').get(0)){
            return false;
        }

      if (isMouseDown) {
        $(this).toggleClass("hilight");
      }
           });

  $(document)
    .mouseup(function () {
      isMouseDown = false;
    });
});

http://jsfiddle.net/3xakkja9/5/

+2

All Articles