如何在当前行中突出显示拖动开始和拖动结束之间的所有单元格,拖动只能是当前选择行

How to highlight all cells between drag start and drag end in current row, Drag can be only possible the current selection row

本文关键字:拖动 单元格 选择 之间 开始 显示 结束      更新时间:2023-09-26

如何突出显示当前行中拖动开始和拖动结束之间的所有单元格,拖动只能是当前选择行,需要防止垂直拖动

检查我的小提琴 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;
        });
});

看看这个。这个想法只是记住鼠标按下开始的行,看看它是否与鼠标悬停中的当前行相同。

$(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/

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

在里约的代码中添加一些修改

$(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')
}