js与h5的结合，初步学习。

来源：互联网发布：手机p2p软件下载编辑：程序博客网时间：2024/06/05 18:55

初步学习拖放事件

首先了解一下与拖放事件有关的标签，拖动某元素时依次触发：

dragstart
drag
dragend

其次了解某元素拖动到一个你想要拖动的目标上，依次发生：

dragenter
dragover
dragleave或drop

了解元素的默认处理来自菜鸟教程

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Document</title>    <meta name="Keywords" content="">    <meta name="Description" content="">    <style type="text/css">        *{            margin:0;            padding: 0;            color: #ffffff;        }        #drag{            width: 100px;            height: 100px;            background-color: blue;            margin: 20px auto;        }        #box{            width: 400px;            height: 400px;            border: 2px solid red;            margin: 40px auto;        }    </style></head><body>    <div id="drag" draggable="true"></div>    <div id="box"></div>    <script>        var drag = document.getElementById("drag");        var box = document.getElementById("box");        drag.ondragstart = function() {            this.style.backgroundColor = "green";                   };        drag.ondrag = function() {            this.innerHTML = "我被拖走了...";        };        document.addEventListener("dragenter",function(event){            if(event.target.id == "box") {                event.target.style.backgroundColor = "brown";                event.target.innerHTML = "进入";            }        });        // 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理        document.addEventListener("dragover", function(event) {            event.preventDefault();        });        document.addEventListener("drop", function(event) {            if(event.target.id == "box") {                drag.innerHTML = "我从盒子回来的...";                drag.style.backgroundColor = "rgb(255,255,0)";            }            else {                drag.innerHTML = "我从盒子外面回来的";                drag.style.backgroundColor = "rgb(255,0,255)";            }        });        document.addEventListener("dragleave",function(event){            if(event.target.id == "box") {                event.target.style.backgroundColor = "pink";                event.target.innerHTML = "出去";            }        });    </script></body></html>

一开始的样子

拖拽后

进入盒子后

出盒子后

从盒子外面鼠标释放，该方块变紫，从里面释放，该方块变黄色

阅读全文

0 0