<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>
可以实现你要的效果 不过看到晚了，可以拖动交换位置和数据
举例如下：<!-- 引入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>
