Question

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

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

Answer 1

检查一下。这个想法只记得mousedown开始的行，看看它是否与mouseover中的当前行相同。

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

Answer 2

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

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

2 个答案: