<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*.column {float: left;}*/
.column div{width: 178px;height: 56px;margin-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>
<div id=SS>
</div>
<input id=I1>
<input id=I2>
<button onclick='change()'/>change</button>
</BODY>
<SCRIPT>
var kk=[
'<div id="content1"style="width:500px; height:20px; border:1px solid black">B1</div>',
'<div id="content2"style="width:500px; height:20px; border:1px solid black">B2</div> ',
'<div id="content3"style="width:500px; height:20px; border:1px solid black">B3</div> ',
'<div id="content4"style="width:500px; height:20px; border:1px solid black">B4</div>'
]
var cx=[0,1,2,3];
for(var i = 0 ;i<kk.length;i++){
SS.insertAdjacentHTML('beforeEnd',kk[i])
}
function change(){
var c0;
var c1;
for(var i =0 ; i<cx.length;i++){
if ( SS.children(i).innerHTML== I1.value ){
c0=i
}
if( SS.children(i).innerHTML== I2.value ){
c1=i
}
}
var a=cx[c1]
cx[c1]=cx[c0]
cx[c0]=a
for(var i =0 ; i<cx.length;i++){
SS.removeChild(SS.children(0))
SS.insertAdjacentHTML("beforeEnd",kk[cx[i]]);
}
}
</SCRIPT>本回答被提问者和网友采纳
