<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5-Drag-Demo by 顽Shi</title>
<style>
.column {
height: 200px;
width: 200px;
float: left;
border: 1px solid black;
background-color: green;
margin-right: 5px;
text-align: center;
cursor: move;
}
.column header {
color: black;
text-shadow: #000 0 1px;
box-shadow: 5px;
padding: 5px;
background: red;
border-bottom: 1px solid black;
}
.column.over {
border: 3px dashed #000;
}
</style>
</head>
<body>
<div id="columns">
<div class="column" draggable="true"><header>div1</header></div>
<div class="column" draggable="true" ><header>div2</header></div>
<div class="column" draggable="true"><header>div3</header></div>
<div class="column" draggable="true"><header>div4</header></div>
<div class="column" draggable="true"><header>div5</header></div>
<div class="column" draggable="true"><header>div6</header></div>
</div>
</body>
<script>
var columns = document.querySelectorAll('#columns .column');
var colum = document.getElementById('columns');
var dragEl = null;
window.onload= function(){
for(var i in columns){
columns[i].index = i;
}
};
[].forEach.call(columns,function(column){
column.addEventListener("dragstart",domdrugstart,false);
column.addEventListener('dragenter', domdrugenter, false);
column.addEventListener('dragover', domdrugover, false);
column.addEventListener('dragleave', domdrugleave, false);
column.addEventListener('drop', domdrop, false);
column.addEventListener('dragend', domdrapend, false);
});
function domdrugstart(e) {
e.target.style.opacity = '0.5';
dragEl = this;
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("text/html",this.innerHTML);
}
function domdrugenter(e) {
e.target.classList.add('over');
}
function domdrugover(e) {
if (e.preventDefault) {
e.preventDefault();
}
e.dataTransfer.dropEffect = 'move';
return false;
}
function domdrugleave(e) {
e.target.classList.remove('over');
}
function domdrop(e) {
if (e.stopPropagation) {
e.stopPropagation();
}
if (dragEl != this) {
//dragEl.innerHTML = this.innerHTML;//目标位置存放当前dom
//this.innerHTML = e.dataTransfer.getData('text/html');//当前dom存放目标位置的dom
var list=document.getElementById("columns");
var newIndex = parseInt(this.index);
var locIndex = parseInt(dragEl.index);
var node=document.getElementById("columns").children[locIndex];
list.insertBefore(node,list.children[newIndex]);
var newColumns = document.querySelectorAll('#columns .column');
for(var i = 0; i < newColumns.length; i++){
newColumns[i].index = i;
}
}
return false;
}
function domdrapend(e) {
[].forEach.call(columns, function (column) {
column.classList.remove('over');
column.style.opacity = '1';
});
}
</script>
</html>
