HTML5之拖拽

時間 2019-11-11

標籤 html5 html 欄目 HTML5 简体版

原文原文鏈接

HTML5拖放css

拖放（Drag和drop）是H5標準的組成部分html

此處需具有js基礎知識及其H5拖拽部分相關方法瀏覽器

 在拖動目標上觸發事件 (源元素):
        ondragstart - 用戶開始拖動元素時觸發 ondrag - 元素正在拖動時觸發 ondragend - 用戶完成元素拖動後觸發 釋放目標時觸發的事件: ondragenter - 當被鼠標拖動的對象進入其容器範圍內時觸發此事件 ondragover - 當某被拖動的對象在另外一對象容器範圍內拖動時觸發此事件 ondragleave - 當被鼠標拖動的對象離開其容器範圍內時觸發此事件 ondrop - 在一個拖動過程當中，釋放鼠標鍵時觸發此事件

下面來看幾個例子app

第一：本地拖放函數

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
    #boxContainer{
        background-color: #BC8F8F;
        width: 600px;
        height: 400px;
    }
</style>
<body>
<div id="boxContainer"></div>
<div id="msg"></div>
<script>
    var imgContainer,msgDiv;
window.onload=function(){
    imgContainer=document.getElementById("boxContainer");
    msgDiv=document.getElementById("msg");
    imgContainer.ondragover=function(e){
        e.preventDefault();//阻止事件event默認行爲
    };
    imgContainer.ondrop=function(e){//經過showObj函數顯示信息知道本地圖片拖拽與file信息有關
        e.preventDefault();
        var f=e.dataTransfer.files[0];//獲取信息
        var fileReader=new FileReader();//讀取信息
        fileReader.onload=function(e){//經過fileReader監聽事件
            showObj(e.target);
            imgContainer.innerHTML="<img src=\""+fileReader.result+"\">"
        };
        fileReader.readAsDataURL(f);//讀取地址
    }
};
function showObj(obj){//這個函數只是爲了表達在拖放成功後取顯示去盛放拖拽形成的數據信息
    var s="";//聲明局部變量
    for(var k in obj){//用forin循環遍歷數據信息
        s+=k+":"+obj[k]+"<br/>"
    }
    msgDiv.innerHTML=s;//顯示信息在HTML
}
</script>    
</body>
</html>

第二：H5拖放spa

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<style type="text/css">
    .box{
        width:400px;
        height:300px;
    }
    #box1{
        float: left;
        background-color: orange;
    }
    #box2{
        float: left;
        background-color: rosybrown;
    }
</style>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="images/demo.jpg" width="200" height="200"/>
<div id="msg"></div>
<script>
       var box1Div,box2Div,msgDiv,img1;//聲明全局變量
window.onload=function(){
    box1Div=document.getElementById("box1");//獲取放置拖拽元素的div
    box2Div=document.getElementById("box2");
    msgDiv=document.getElementById("msg");//獲取顯示拖拽信息的元素的div
    img1=document.getElementById("img1");
    
    box1Div.ondragenter=function(e){//給其添加ondragenter即當被鼠標拖動的對象進入其容器範圍內時觸發此事件，即給拖拽加監聽事件        showObj(e);//e爲event事件爲事件參數   }
    box1Div.ondragover=function(e){
        e.preventDefault();//阻止事件event默認行爲
    };
    box2Div.ondragover=function(e){//ondragover - 當某被拖動的對象在另外一對象容器範圍內拖動時觸發此事件
        e.preventDefault();//阻止事件event默認行爲，調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行爲是以連接形式打開）
    };
    img1.ondragstart=function(e){//ondragstart - 用戶開始拖動元素時觸發
        e.dataTransfer.setData("imgId","img1");//用setData方法獲取數據
    };
    box1Div.ondrop=dropImghand;
    box2Div.ondrop=dropImghand;//ondrop - 在一個拖動過程當中，釋放鼠標鍵時觸發此事件
};
function dropImghand(e){//box1Div.ondrop=後拿出來設置函數名，即封裝成方法，再在上面引用
    showObj(e.dataTransfer);
    e.preventDefault();//阻止事件event默認行爲
    //建立節點，放置數據
    var img=document.getElementById(e.dataTransfer.getData("imgId"));
    e.target.appendChild(img);//添加到節點當中
}
function showObj(obj){//這個函數只是爲了表達在拖放成功後取顯示去盛放拖拽形成的數據信息
    var s="";//聲明局部變量
    for(var k in obj){//用forin循環遍歷數據信息
        s+=k+":"+obj[k]+"<br/>"
    }
    msgDiv.innerHTML=s;//顯示信息在HTML
}

</script>
</body>
</html>

1. HTML5拖拽+demo
2. html5拖拽
3. HTML5拖拽
4. 前端之HTML5-----拖拽
5. html5學習-拖拽
6. html5拖拽總結
7. html5 拖拽事件
8. HTML5圖片拖拽
9. HTML5之拖拽(兼容IE和非IE)
10. 流程圖(HTML5拖拽)
更多相關文章...
• jQuery Mobile swiperight 事件 - jQuery Mobile 教程
• jQuery Mobile swipeleft 事件 - jQuery Mobile 教程
• 互聯網組織的未來：剖析GitHub員工的任性之源
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。