HTML5 拖放

拖放

设置元素可拖动

draggable 设置元素可拖动 例 <img src="xxx" draggable="true'/>

 

在拖动目标上触发事件

ondragstart 用户开始拖动元素时触发

ondrag  用户正在拖动时触发

ondragend 用户完成拖动后触发

dataTransfer对象

分析 .data 数据的意思 .transfer转移的意思

由此推测 此对象功能用于数据传递

dataTransfer

类型对象在拖动操作中主要起到媒介作用，用于从源程序向目标对象传递数据

在源对象中设置数据，然后再目标对象获取

dataTransfer.setData() 自定义传递数据 

dataTransfer.setData(format , data);

参数解析 format 传递数据类型 data 设置要传递的数据

format 格式类型有如下几种（可以自定义,"abc"都行）

1、text/html   是html格式的正文 
2、text/plain   是无格式正文

3、text/xml   忽略xml头所指定编码格式而默认采用us-ascii编码

4、text/uri-list 

第一个参数也可以设置成"text"或者"URL"，会自动映射为text/plain”和“text/uri-list”。

如果setData设置数据的类型不存在，那么将会按顺序在数据列表尾部添加。

如果setData设置数据的类型已经存在，那么将会替换数据列表中已经存在的数据。

 dataTransfer.getData(fomat)

获取setData设置的值，format为setData设置的format值

释放目标时触发的事件

ondragenter 在被鼠标拖动对象进入其容器范围内触发此事件

ondragover 在某被拖动的对象进入另一个对象容器范围内拖动时触发此事件（在拖动元素时，每隔350毫秒会触发ondragover事件）

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

ondragleave 在被鼠标拖动的对象离开其容器范围内时触发此事件

ondrop 在一个拖动过程中 释放鼠标时触发此事件

 实例代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.droptarget {
    float: left; 
    width: 100px; 
    height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style> 
</head>
<body>

<p>在两个矩形框中来回拖动 p 元素:</p>
<div class="droptarget">
    <p draggable="true" id="dragtarget">拖动我!</p>
</div>
<div class="droptarget"></div>
<p style="clear:both;"><strong>注意：</strong>Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。</p>
<p id="demo"></p>
<script>
/* 拖动时触发*/
document.addEventListener("dragstart", function(event) {
    //dataTransfer.setData()方法设置数据类型和拖动的数据
    event.dataTransfer.setData("Text", event.target.id);
    // 拖动 p 元素时输出一些文本
    document.getElementById("demo").innerHTML = "开始拖动 p 元素.";    
    //修改拖动元素的透明度
    event.target.style.opacity = "0.4";
});
//在拖动p元素的同时,改变输出文本的颜色
document.addEventListener("drag", function(event) {
    document.getElementById("demo").style.color = "red";
});
// 当拖完p元素输出一些文本元素和重置透明度
document.addEventListener("dragend", function(event) {
    document.getElementById("demo").innerHTML = "完成 p 元素的拖动";
    event.target.style.opacity = "1";
});
/* 拖动完成后触发 */
// 当p元素完成拖动进入droptarget,改变div的边框样式
document.addEventListener("dragenter", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "3px dotted red";
    }
});
// 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
document.addEventListener("dragover", function(event) {
    event.preventDefault();
});
// 当可拖放的p元素离开droptarget，重置div的边框样式
document.addEventListener("dragleave", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
    }
});
/*对于drop,防止浏览器的默认处理数据(在drop中链接是默认打开)
复位输出文本的颜色和DIV的边框颜色
利用dataTransfer.getData()方法获得拖放数据
拖拖的数据元素id(“drag1”)
拖拽元素附加到drop元素*/
document.addEventListener("drop", function(event) {
    event.preventDefault();
    if ( event.target.className == "droptarget" ) {
        document.getElementById("demo").style.color = "";
        event.target.style.border = "";
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
});
</script>

</body>
</html>

个人总结重点

设置元素可拖动 draggable="true"

拖动事件

ondragstart 拖动开始时触发  ondrag 拖动时触发 ondragend拖动完成后触发  

ondragenter 被鼠标拖动对象进入其容器范围内触发事件 

ondragover 在某被拖动的对象进入另一个对象容器范围内拖动时触发此事件

默认无法将数据放置到其他元素中，要通过调用ondragover的event.preventDefault()方法 设置允许放置

ondragleave 被鼠标拖动离开其容器范围时触发

ondrop 拖动时松开鼠标触发

dataTransfer.setData(format,data)自定义传递数据 format可自定义，一种format只会存一个data

dataTransfer.getData(format) 获取传递的数据

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.droptarget {
    float: left; 
    width: 100px; 
    height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style> 
</head>
<body>

<p>在两个矩形框中来回拖动 p 元素:</p>
<div class="droptarget">
    <p draggable="true" id="dragtarget">拖动我!</p>
</div>
<div class="droptarget"></div>
<p style="clear:both;"><strong>注意：</strong>Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。</p>
<p id="demo"></p>
<script>
/* 拖动时触发*/
document.addEventListener("dragstart", function(event) {
    //dataTransfer.setData()方法设置数据类型和拖动的数据
    event.dataTransfer.setData("Text", event.target.id);
    // 拖动 p 元素时输出一些文本
    document.getElementById("demo").innerHTML = "开始拖动 p 元素.";    
    //修改拖动元素的透明度
    event.target.style.opacity = "0.4";
});
//在拖动p元素的同时,改变输出文本的颜色
document.addEventListener("drag", function(event) {
    document.getElementById("demo").style.color = "red";
});
// 当拖完p元素输出一些文本元素和重置透明度
document.addEventListener("dragend", function(event) {
    document.getElementById("demo").innerHTML = "完成 p 元素的拖动";
    event.target.style.opacity = "1";
});
/* 拖动完成后触发 */
// 当p元素完成拖动进入droptarget,改变div的边框样式
document.addEventListener("dragenter", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "3px dotted red";
    }
});
// 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
document.addEventListener("dragover", function(event) {
    event.preventDefault();
});
// 当可拖放的p元素离开droptarget，重置div的边框样式
document.addEventListener("dragleave", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
    }
});
/*对于drop,防止浏览器的默认处理数据(在drop中链接是默认打开)
复位输出文本的颜色和DIV的边框颜色
利用dataTransfer.getData()方法获得拖放数据
拖拖的数据元素id(“drag1”)
拖拽元素附加到drop元素*/
document.addEventListener("drop", function(event) {
    event.preventDefault();
    if ( event.target.className == "droptarget" ) {
        document.getElementById("demo").style.color = "";
        event.target.style.border = "";
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
});
</script>

</body>
</html>
posted @ 2020-06-05 23:25  Ren小白  阅读(138)  评论(0)    收藏  举报
levels of contents