如何在当前行中突出显示拖动开始和拖动结束之间的所有单元格,拖动只能是当前选择行
How to highlight all cells between drag start and drag end in current row, Drag can be only possible the current selection row
如何突出显示当前行中拖动开始和拖动结束之间的所有单元格,拖动只能是当前选择行,需要防止垂直拖动
检查我的小提琴 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')
}
相关文章:
- 使用自动保存功能拖放表格单元格
- 禁用jQuery UI中可拖动的x或y管理单元
- jquery-ui sortable:如何在拖动时不添加单元格
- 拒绝拖放到表格的第一个子单元格
- 如何在当前行中突出显示拖动开始和拖动结束之间的所有单元格,拖动只能是当前选择行
- 使用重拨和拖动禁用空单元格的拖放功能
- jqGrid-拖动一行进行排序会打乱单元格宽度
- 鼠标拖动时高亮显示单行的表格单元格
- jQuery Sortable插件对表格单元格收缩,同时拖动
- 拖放动态生成的两个表之间的所有单元格
- 如何在表格中创建可拖动单元格
- ExtJS 5:电子表格拖动选择显示单元格工具提示
- 用鼠标拖动选择对角线的表格单元格
- 如何在拖放单元格内容时获取标题单元格名称
- 在网格中垂直拖放单元格
- 网格单元格到单元格的拖放
- 拖放表-将单元格移动到不同的列
- 使用动手表获取单元格数据
- Html5在表格单元格之间和单元格内拖动项目
- 有没有简单的方法来拖放单元格从一个表到另一个表