首页 > 教程 >

html5的drag和drop的用法示例

2023-02-16教程围观次

简介本篇文章给大家带来的内容是关于html5的drag和drop的用法示例（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。5分钟弄清楚html5的draganddrop，及其他监听事件和执行的次序。示例如下：5分钟draganddrop简明示例#draggable{width:200px;height:20px;text-align:center;background:whit

本篇文章给大家带来的内容是关于 html5的drag和drop的用法示例（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

5分钟弄清楚html5的drag and drop，及其他监听事件和执行的次序。

示例如下：

<!DOCTYPE html><html><head><  charset="UTF-8"><  name="viewport" content="width=device-width, initial-scale=1.0"><  http-equiv="X-UA-Compatible" content="ie=edge">< >5分钟drag and drop简明示例</ ><style>    #draggable {        width: 200px;        height: 20px;        text-align: center;        background: white;    }    .dropzone {        width: 200px;        height: 20px;        background: blueviolet;        margin-bottom: 10px;        padding: 10px;    }</style>< >    var dragged;    document.addEventListener("dragstart", function (event) {        console.log('==========dragstart 开始被拖拽==========一次拖动只执行一次');        // 保存拖动元素的引用(ref.)        dragged = event.target;        // 使其半透明        event.target.style.opacity = .5;    }, false);     /* 拖动目标元素时触发drag事件 */    document.addEventListener("drag", function (event) {        // console.log('==========drag==========拖拽时会一直监听，直到放下元素');    }, false);     /* 放置目标元素时触发事件 */    document.addEventListener("dragover", function (event) {        // console.log('==========dragover==========拖拽时会一直监听，直到放下元素');        // 阻止默认动作以启用drop        event.preventDefault();    }, false);     document.addEventListener("dragenter", function (event) {        console.log('==========dragenter 拖曳元素 进入目标元素==========对应着dragleave');        // 当可拖动的元素进入可放置的目标时高亮目标节点        if (event.target.className == "dropzone") {            event.target.style.background = "purple";        }    }, false);     document.addEventListener("dragleave", function (event) {        console.log('==========dragleave 拖曳元素 离开目标元素==========对应着dragenter');        // 当拖动元素离开可放置目标节点，重置其背景        if (event.target.className == "dropzone") {            event.target.style.background = "";        }    }, false);     document.addEventListener("drop", function (event) {        console.log('==========drop 放下元素==========一次拖动只执行一次，在dragenter前触发');        // 阻止默认动作（如打开一些元素的链接）        event.preventDefault();        // 将拖动的元素到所选择的放置目标节点中        if (event.target.className == "dropzone") {            event.target.style.background = "";            dragged.parentNode.removeChild(dragged);            event.target.appendChild(dragged);        }    }, false);     document.addEventListener("dragend", function (event) {        console.log('==========dragend 结束拖拽==========一次拖动只执行一次');        // 重置透明度        event.target.style.opacity = "";    }, false);</ ></head> <body><div>    <div id="draggable" draggable="true"  start="event.dataTransfer.setData('text/plain',null)">        这是可以拖拽的DIV    </div></div><div></div><div></div><div></div></body></html>

下载链接：网站源码/小程序源码/网站模板下载

Tags： html5 示例用法 drag drop

上一篇：Vue中Computed和Watch的用法及区别
下一篇：HTML5中video标签如何使用