使用HTML5里面的drag,drop系列事件轻松实现元素拖拉功能

html5.1标准里引入了拖拉事件：drag,dragstart,dragend,dragover,dragenter,dragleave,dragexit,drop，利用这些事件可以轻松实现界面拖拉功能。

h5, drag, drop, event

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2296
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var dragged;

/* events fired on the draggable target */
document.addEventListener("drag", function(event) {

}, false);

document.addEventListener("dragstart", function(event) {
    // store a ref. on the dragged elem
    dragged = event.target;
    // make it half transparent
    event.target.style.opacity = .5;
}, false);

document.addEventListener("dragend", function(event) {
    // reset the transparency
    event.target.style.opacity = "";
}, false);

/* events fired on the drop targets */
document.addEventListener("dragover", function(event) {
    // prevent default to allow drop
    event.preventDefault();
}, false);

document.addEventListener("dragenter", function(event) {
    // highlight potential drop target when the draggable element enters it
    if (event.target.className == "dropzone") {
        event.target.style.background = "purple";
    }

}, false);

document.addEventListener("dragleave", function(event) {
    // reset background of potential drop target when the draggable element leaves it
    if (event.target.className == "dropzone") {
        event.target.style.background = "";
    }

}, false);

document.addEventListener("drop", function(event) {
    // prevent default action (open as link for some elements)
    event.preventDefault();
    // move dragged elem to the selected drop target
    if (event.target.className == "dropzone") {
        event.target.style.background = "";
        dragged.parentNode.removeChild(dragged);
        event.target.appendChild(dragged);
    }

}, false);

编译

CSS

HTML

html5.1标准里引入了拖拉事件：drag,dragstart,dragend,dragover,dragenter,dragleave,dragexit,drop，利用这些事件可以轻松实现界面拖拉功能。

h5, drag, drop, event

编辑器支持Emmet

快捷键

html5.1标准里引入了拖拉事件：drag,dragstart,dragend,dragover,dragenter,dragleave,dragexit,drop，利用这些事件可以轻松实现界面拖拉功能。

h5, drag, drop, event

使用HTML5 Canvas实现的射击打怪类网页游戏

使用HTML5 CSS3构建的Chrome浏览器标题栏仿真界面

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：