html5中的拖拽功能

琉森湖的小鸭子嘴里衔着荔枝 發表於 2019-6-24 13:09:00

<div>
<div>拖拽元素支持的事件</div>
<div>ondrag 应用于拖拽元素，整个拖拽过程都会调用</div>
<div>ondragstart 应用于拖拽元素，当拖拽开始时调用</div>
<div>ondragleave 应用于拖拽元素，当鼠标离开拖拽元素是调用</div>
<div>ondragend 应用于拖拽元素，当拖拽结束时调用</div>
 
<div> 目标元素支持的事件</div>
<div> ondragenter 应用于目标元素，当拖拽元素进入时调用</div>
<div> ondragover 应用于目标元素，当停留在目标元素上时调用</div>
<div> ondrop 应用于目标元素，当在目标元素上松开鼠标时调用</div>
<div> ondragleave 应用于目标元素，当鼠标离开目标元素时调用</div>

</div>
<div> </div>
<div>注意：浏览器默认会阻止ondrop事件：我们必须在ondrapover中阻止默认行为</div>
<div>实现了一个拖拽功能，其实是可以做成一个小游戏的。</div>
<div>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
 * {
 padding: 0;
 margin: 0;
 }

 .div1,
 .div2,
 .div3 {
 margin: 0 20px;
 float: left;
 width: 200px;
 height: 200px;
 border: 1px solid #000;
 }
 div{
 display: flex;
 flex-direction: column;
 align-items: center
 }
 p{
 display: flex;
 flex-direction: column;
 align-items: center
 }

 .p1 {
 width: 50px;
 background-color: pink;
 margin: 5px 0;
 }

 .p2 {
 width: 80px;
 background-color: burlywood;
 margin: 5px 0;
 }
 .p3 {
 width: 110px;
 background-color: rgb(133, 88, 29);
 margin: 5px 0;
 }
 .p4 {
 width: 140px;
 background-color: rgb(172, 37, 48);
 margin: 5px 0;
 }
 .p5 {
 width: 170px;
 background-color: rgb(17, 182, 31);
 margin: 5px 0;
 }
 .p6 {
 width: 200px;
 background-color: rgb(90, 33, 155);
 margin: 5px 0;
 }
</style>
</head>

<body>
<div id="div1" class="div1">
 
 <p id="pe3" class="p3" draggable="true">3</p>
 <p id="pe2" class="p2" draggable="true">2</p>
 <p id="pe5" class="p5" draggable="true">5</p>
 <p id="pe1" class="p1" draggable="true">1</p>
 <p id="pe6" class="p6" draggable="true">6</p>
 <p id="pe4" class="p4" draggable="true">4</p>
</div>
<div id="div2" class="div2"></div>

<div id="div3" class="div3"></div>

<script>
 /* 拖拽元素支持的事件
 ondrag 应用于拖拽元素，整个拖拽过程都会调用
 ondragstart 应用于拖拽元素，当拖拽开始时调用
 ondragleave 应用于拖拽元素，当鼠标离开拖拽元素是调用
 ondragend 应用于拖拽元素，当拖拽结束时调用

 目标元素支持的事件
 ondragenter 应用于目标元素，当拖拽元素进入时调用
 ondragover 应用于目标元素，当停留在目标元素上时调用
 ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
 ondragleave 应用于目标元素，当鼠标离开目标元素时调用
 */

 // var obj = null; /* 当前被拖拽的值*/

 document.ondragstart = function (e) {
 /*通过dataTransfer来实现数据的存储与获取
 setData(format, data)
 format: 数据的类型： text/htmltext/uri-list
 Data: 数据：一般来说是字符串值
 */
 // e.dataTransfer.setData("Text", e.target.id);
 e.target.style.opacity = 0.5
 e.dataTransfer.setData("text", e.target.id);
 console.log(e.target.id)
 }

 document.ondragend = function (e) {
 e.target.style.opacity = 1;
 }

 /*浏览器默认会阻止ondrop事件：我们必须在ondrapover中阻止默认行为*/
 document.ondragover = function (e) {
 e.preventDefault();
 }

 document.ondrop = function (e) {
 /*通过e.dataTransfer.setData存储的数据，只能在drop事件中获取*/
 var data = e.dataTransfer.getData("text");
 e.target.appendChild(document.getElementById(data));
 }

</script>
</body>

</html></pre>
</div>
 
<img src="https://img2018.cnblogs.com/blog/997393/201906/997393-20190624130619842-1400858707.png">
</div> 
来源：https://www.cnblogs.com/zengsf/p/11076479.html

頁: [1]

琼殿技术论坛's Archiver

html5中的拖拽功能