实现 JQuery拖动鼠标(mousedown,mouseup)后可以选择多个单元格

文斯特 2017-10-23 02:32:19

<!DOCTYPE HTML>
<HTML>
<head>
<TITLE>The document title</TITLE>
<meta charset=utf-8>
<script src="jquery.1.9.0.min.js" type="text/javascript"></script>
<style type="text/css">
table{
border-spacing: 0;
}
td{
height: 50px;
width: 50px;
border-spacing: 0;
}
.hidden{
display: none;
}
</style>
</head>

<body>
<table id="dataTab" border="1">
<tr id ="r1">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id ="r2">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<p id ='log'></p>
<button id="hebing" type="button" >合并</button>
<script type="text/javascript">
(function(b){
b.drag = b.drag || {
selectecdlog: [],
resultLen: 0,
resultBegin: 0,
backColor: ['red','green','blue'], // assume 3 rows 1 -red 2 - green 3 - blue
resultColor: 0
};
b.extend(b.drag, {
version: "1.0.1",
getAccessor: function(b, f) {
var c, e, a = [],
j;
if ("function" === typeof f) return f(b);
c = b[f];
if (void 0 === c) try {
if ("string" === typeof f && (a = f.split(".")), j = a.length) for (c = b; c && j--;) e = a.shift(),
c = c[e];
} catch(g) {}
return c;
},
getMethod: function(d) {
return this.getAccessor(b.fn.drag, d);
},
onMouseUp: function(){
/* Act on the event */
var len =b.drag.resultLen= Math.abs(parseInt(b.drag.selectecdlog[0].substr(b.drag.selectecdlog[0].indexOf('c')+1)) - parseInt($(this).attr('id').substr(($(this).attr('id').indexOf('c'))+1)))+1;
var begin =b.drag.resultBegin= parseInt(b.drag.selectecdlog[0].substr(b.drag.selectecdlog[0].indexOf('c')+1)) >parseInt($(this).attr('id').substr(($(this).attr('id').indexOf('c'))+1)) ? parseInt($(this).attr('id').substr(($(this).attr('id').indexOf('c'))+1)):parseInt(b.drag.selectecdlog[0].substr(b.drag.selectecdlog[0].indexOf('c')+1));
for(var i =0; i<b.drag.resultLen;i++){
b.drag.selectecdlog.push(b.drag.selectecdlog[0].substr(0,2)+"c"+(b.drag.resultBegin+i));
}
b.drag.selectecdlog.shift();
$('#log').text(b.drag.selectecdlog.toString());

b(a).find("td").unbind('mouseover',b.drag.onMouseOver);
b(a).find("td").unbind('mouseup',b.drag.onMouseUp);
},
onMouseOver: function() {
var len =b.drag.resultLen= Math.abs(parseInt(b.drag.selectecdlog[0].substr(b.drag.selectecdlog[0].indexOf('c')+1)) - parseInt($(this).attr('id').substr(($(this).attr('id').indexOf('c'))+1)))+1;
var begin =b.drag.resultBegin= parseInt(b.drag.selectecdlog[0].substr(b.drag.selectecdlog[0].indexOf('c')+1)) >parseInt($(this).attr('id').substr(($(this).attr('id').indexOf('c'))+1)) ? parseInt($(this).attr('id').substr(($(this).attr('id').indexOf('c'))+1)):parseInt(b.drag.selectecdlog[0].substr(b.drag.selectecdlog[0].indexOf('c')+1));
b(a).find('td').css('background-color', 'white');
for(var i =0; i<len;i++){
b(a).find('#'+b.drag.selectecdlog[0].substr(0,2)+"c"+(begin+i)).css('background-color', b.drag.resultColor);
}
},
extend: function(d) {
b.extend(b.fn.drag, d);
this.no_legacy_api || b.fn.extend(d);
}

})

b.fn.drag = function(d) {
if ("string" === typeof d) {
var f = b.drag.getMethod(d);
if (!f) throw "drag - No such method: " + d;
var c = b.makeArray(arguments).slice(1);
return f.apply(this, c);
}
var e = b.extend(!0, {},a=this,b.drag.defaults, d || {});
// set id attr for each td
b(a).find("td").each(function(index, val){
/* iterate through array or object */
$(this).attr('id', $(this).parent().attr('id')+"c"+($(this).index()+1))
});

b(a).find("td").mousedown(function() {
b.drag.selectecdlog = [];
b.drag.resultColor = b.drag.backColor[b(this).parent().attr('id').substr(1)-1];
console.log(b.drag.resultColor.toString());
b(a).find('td').css('background-color', 'white');
b(this).css('background-color', b.drag.resultColor);
b.drag.selectecdlog.push($(this).attr('id'));
b(a).find("td").mouseup(b.drag.onMouseUp);
b(a).find("td").mouseover(b.drag.onMouseOver);
})
b("#hebing").click(function(){
m = b.drag.getMethod('combine');
m.call(this);
})
return this;
}

b.drag.extend({
//combine cells
combine: function(argument) {
// body...
for (var m in b.drag.selectecdlog){
if(m==0){
$('#'+b.drag.selectecdlog[m]).attr('colspan', b.drag.resultLen);
$('#'+b.drag.selectecdlog[m]).css('width',b.drag.resultLen*50+"px");
//$('#'+selectecdlog[m]).css('background-color', 'bule');
}
else{
$('#'+b.drag.selectecdlog[m]).addClass('hidden');
}
}
}
})
})(jQuery);
jQuery(document).ready(function(){
jQuery("#dataTab").drag();
})
</script>
</body>
</HTML>

...全文