您的位置：首页 > Web前端 > HTML5

Html5 drag and drop

2015-07-11 18:29 477 查看

<!DOCTYPE html>
<html>
<head>
<title>.</title>
<style type="text/css">
#columns{width: 380px; height: 120px; border: solid 1px #ccc;}
.column{width: 100px; height: 100px; line-height: 100px; text-align: center; margin: 10px; border: solid 1px #ccc; float: left;}
.column.over {
border: 2px dashed #000;
}
</style>
</head>

<body>
<div id="columns">
<div class="column" draggable="true">A</div>
<div class="column" draggable="true">B</div>
<div class="column" draggable="true">C</div>
</div>

<script>
/*
Drap and Drop Events:
dragstart
drag
dragenter
dragleave
dragover
drop
dragend
*/
var dragSrcEl = null;

function handleDragStart(e) {
dragSrcEl = this;

e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}

function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault(); // Necessary. Allows us to drop.
}

e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.

return false;
}

function handleDragEnter(e) {
// this / e.target is the current hover target.
this.classList.add('over');
}

function handleDragLeave(e) {
this.classList.remove('over');  // this / e.target is previous target element.
}

function handleDrop(e) {
// this/e.target is current target element.

if (e.stopPropagation) {
e.stopPropagation(); // Stops some browsers from redirecting.
}

// Don't do anything if dropping the same column we're dragging.
if (dragSrcEl != this) {
// Set the source column's HTML to the HTML of the column we dropped on.
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}

return false;
}

function handleDragEnd(e) {
// this/e.target is the source node.

[].forEach.call(cols, function (col) {
col.classList.remove('over');
});
}

var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
col.addEventListener('dragstart', handleDragStart, false);
col.addEventListener('dragenter', handleDragEnter, false)
col.addEventListener('dragover', handleDragOver, false);
col.addEventListener('dragleave', handleDragLeave, false);
col.addEventListener('drop', handleDrop, false);
col.addEventListener('dragend', handleDragEnd, false);
});
</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航