<style>
td.hover{border:dotted 3px #f00 }
td.selected{background:#f00color:#fff}
td.disabled{background:#eeecolor:#000}
#tdMove{position:absolutedisplay:noneborder:dotted 3px #f00background:#fff}
table{user-select:none-moz-user-select:none}</style>
<table border="1">
<script>
var s = ''
for (var i = 0i <10i++) {
s += '<tr>'
for (var j = 0j <10j++) s += '<td' + (Math.random() >0.8 ? ' class="disabled"' : '') + '>' + i + '-' + j + '</td>'
s += '</tr>'
}
document.write(s)
</script>
</table>
<div id="tdMove"></div>
<script>
var tdMove = $('#tdMove'),px=5//浮动块偏移量，不偏移鼠标移动过程会出现在这个div移动的情况，移动到td上无法响应高亮样式
$('td:not(.disabled)').mousedown(function (e) {
this.className = 'selected'
tdMove.html(this.innerHTML).css({ left: e.clientX + px, top: e.clientY + px }).show()
$(document).mousemove(function (e) {
var el = e.target
tdMove.css({ left: e.clientX + px, top: e.clientY + px })
if (el.tagName == 'TD' &&el.className != 'disabled' &&el.className != 'selected') {
$('td').removeClass('hover')el.className = 'hover'
}
}).mouseup(function () {
$(document).unbind()
tdMove.hide()
var td = $('td.hover,td.selected')
if (td.length == 2) {
var s = td[1].innerHTML
td[1].innerHTML = td[0].innerHTML
td[0].innerHTML = s
}
td.removeClass('hover selected')
})
})
</script>
在页面中换行需要使用br标签或通过其他块级元素、css规则等方式实现：1.br标签
<span>123<br />456<span>
2.块级元素（输出的html代码可以是一行，显示出来会出现3行）
<div>第一行</div><div>第二行</div><div>第三行</div>
3.pre标签（生成html代码必须包含所有的格式，如换行符\n等，会按照源代码的格式显示）
<pre>
第1行
第2行
第3行
</pre>
