<!-- 引入jQuery -->
<script src="../../scripts/jquery.js" type="text/JavaScript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
var $one_li = $("ul li:eq(1)") // 获取<ul>节点中第二个<li>元素节点
var $two_li = $("ul li:eq(2)") // 获取<ul>节点中第三个<li>元素节点
$two_li.insertBefore($one_li) //移动节点
})
//]]>
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*.column {float: left}*/
.column div{width: 178pxheight: 56pxmargin-bottom: 2px}
.box1{background-color: black}
.box2{background-color: bisque}
.box3{background-color: gray}
.box4{background-color: wheat}
</style>
</head>
<body>
<div class="column" draggable="true">
<div class="box1">
</div>
</div>
<div class="column" draggable="true">
<div class="box2">
</div>
</div>
<div class="column" draggable="true">
<div class="box3">
</div>
</div>
<div class="column" draggable="true">
<div class="box4">
</div>
</div>
<script>
function handleDragStart(e) {
this.style.opacity = '1'
dragSrcEl = this
e.dataTransfer.effectAllowed = 'move'
e.dataTransfer.setData('text/html', this.innerHTML)
}
function handleDragEnter(e) {
this.classList.add('over')
}
function handleDragLeave(e) {
this.classList.remove('over')
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault()
}
return false
}
//拖拽完成后，作用在拖拽元素上
function handleDrop(e) {
if (dragSrcEl != this) {
dragSrcEl.innerHTML = this.innerHTML
this.innerHTML = e.dataTransfer.getData('text/html')
}
return false
}
//拖拽完成后，作用在被拖拽元素上
function handleDragEnd(e) {
this.style.opacity = '1'
[].forEach.call(divs, function(d) {
d.classList.remove('over')
})
}
var divs = document.querySelectorAll('.column')
[].forEach.call(divs, function(d) {
d.addEventListener('dragstart', handleDragStart, false)
d.addEventListener('dragenter', handleDragEnter, false)
d.addEventListener('dragover', handleDragOver, false)
d.addEventListener('dragleave', handleDragLeave, false)
d.addEventListener('drop', handleDrop, false)
d.addEventListener('dragend', handleDragEnd, false)
})
</script>
</body>
</html>
可以实现你要的效果 不过看到晚了，可以拖动交换位置和数据
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script><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>
