HTML5——新特性，拖放

HTML5——新特性，拖放

HTML5 拖放（Drag 和 Drop）
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
1.设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true">
2.拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}
3.放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
4.进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

例：HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖放</title>
    <script src="JS/tuofang.js"></script>
</head>
<style>
    .box{
        400px;
        height: 400px;
    }
    #box1{
        background-color: #ff2;
    }
</style>
<body>
<div id="box1" class="box"></div>
<img id="img1" src="img/img01.png" alt="" width="350px">
<div id="msg"></div>
</body>
</html>

JS
var box1Div,msgDiv,img1;

window.onload = function () {
    box1Div=document.getElementById("box1");
    msgDiv=document.getElementById("msg");
    img1=document.getElementById("img1");
// 监听拖拽事件
   // box1Div.ondragenter=function (e) {
     //      showObj(e);}
    //图片被拖动时,前面是设置的，后面是本来的id
img1.ondragstart=function (e) {
    e.dataTransfer.setData("imgId","img1")
}
    // 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
    box1Div.ondragover=function (e) {
        e.preventDefault();

    }
//打印对象e中的信息
    box1Div.ondrop=function (e) {
        showObj(e.dataTransfer);
        e.preventDefault();
        var img=document.getElementById(e.dataTransfer.getData("imgId"));
        box1Div.appendChild(img);
    }
}
function showObj(obj) {
    var s="";
    for (var k in obj){
        s+=k+":"+obj[k]+"<br/>"
    }
    msgDiv.innerHTML=s;
    
}

例实现两个地方的拖放：HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖放</title>
    <script src="JS/tuofang.js"></script>
</head>
<style>
    .box{
        400px;
        height: 400px;
    }
    #box1{
        float: left;
        background-color: #ff2;
    }
    #box2{
        float: left;
        background-color: #aaaa22;
    }
</style>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="img/img01.png" alt="" width="350px">
<div id="msg"></div>
</body>
</html>

JS
var box1Div,box2Div,msgDiv,img1;

window.onload = function () {
    box1Div=document.getElementById("box1");
    box2Div=document.getElementById("box2");
    msgDiv=document.getElementById("msg");
    img1=document.getElementById("img1");
// 监听拖拽事件
   // box1Div.ondragenter=function (e) {
     //      showObj(e);}
    //图片被拖动时,前面是设置的，后面是本来的id
img1.ondragstart=function (e) {
    e.dataTransfer.setData("imgId","img1")
}
    // 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
    box1Div.ondragover=function (e) {
        e.preventDefault();

    }
    box2Div.ondragover=function (e) {
        e.preventDefault();

    }
//打印对象e中的信息
    box1Div.ondrop=dropImghandler;
    box2Div.ondrop=dropImghandler;
}
function dropImghandler(e) {
    showObj(e.dataTransfer);
    e.preventDefault();
    var img=document.getElementById(e.dataTransfer.getData("imgId"));
    e.target.appendChild(img);
}
function showObj(obj) {
    var s="";
    for (var k in obj){
        s+=k+":"+obj[k]+"<br/>"
    }
    msgDiv.innerHTML=s;
    
}
相关阅读:
用JS打开新窗口，防止被浏览器阻止的方法
 谷歌浏览器插件开发教程7
谷歌浏览器插件开发教程6
谷歌浏览器插件开发教程5
谷歌浏览器插件开发教程4
谷歌浏览器插件开发教程3
谷歌浏览器插件开发教程2
谷歌浏览器插件开发教程1
从网站上偷图偷音乐偷视频教程
 pixijs shader 实现图片波浪效果
原文地址：https://www.cnblogs.com/1322957664qqcom/p/11244906.html