html5的鼠標拖拽

時間 2019-12-02

標籤 html5 html 鼠標欄目 HTML5 简体版

原文原文鏈接

鼠標拖拽php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one {width:200px;height:200px;border:1px solid blue;margin:10px;}
        .two {width:50px;height:50px;border:1px solid red;margin:10px;}
    </style>
</head>
<body>
    <div class="one" id="one"></div>
    <!--必須設置元素爲可拖拽-->
    <div class="two" id="two" draggable="true"></div>
</body>
<script>
    window.onload = function() {
        //two爲拖拽對象，one爲目標對象
        var one = document.getElementById("one");
        var two = document.getElementById("two");
 
        //拖拽開始事件
        two.ondragstart = function(e) {
            //dataTransfer對象，拖拽對象用來傳遞數據的媒介
            e.dataTransfer.setData('text', '哈哈哈');
 
            one.innerHTML += "開始";
        };
        //拖拽移動事件
        two.ondrag = function(e) {
 
        };
        //拖拽結束事件
        two.ondragend = function(e) {
            one.innerHTML += "結束";
        };
 
        //拖曳元素進入目標元素的時候觸發的事件
        one.ondragenter = function(e) {
            this.innerHTML += "進入";
 
            e.preventDefault();
        };
        //拖拽元素在目標元素上移動的時候觸發的事件
        one.ondragover = function(e) {
            this.innerHTML += "移動";
 
            //必須阻止默認事件，不然ondrop沒法觸發
            e.preventDefault();
        };
        //拖拽元素離開目標元素時觸發的事件
        one.ondragleave = function(e) {
            this.innerHTML += "離開";
        };
        //拖拽元素在目標元素上同時鼠標放開觸發的事件
        one.ondrop = function(e) {
            two.innerHTML = e.dataTransfer.getData('text');
            this.appendChild(two);
        };
    };
</script>
</html>

拖拽文件上傳html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {width:200px;height:200px;border:1px dashed #bbb;}
    </style>
</head>
<body>
    <div class="box" id="box">拖拽文件上傳</div>
</body>
<script>
    window.onload = function() {
        var box = document.getElementById("box");
 
        //拖曳元素進入目標元素的時候觸發的事件
        box.ondragenter = function(e) {
 
            e.preventDefault();
        };
        //拖拽元素在目標元素上移動的時候觸發的事件
        box.ondragover = function(e) {
 
            e.preventDefault();
        };
        //拖拽元素離開目標元素時觸發的事件
        box.ondragleave = function(e) {
 
            e.preventDefault();
        };
        //拖拽元素在目標元素上同時鼠標放開觸發的事件
        box.ondrop = function(e) {
            //e.dataTransfer.files能夠訪問拖拽的文件信息
            var file = e.dataTransfer.files[0];
            //建立一個FormData對象
            var fd = new FormData();
            //把文件添加到FormData對象中
            fd.append('pic', file);
            var xhr = new XMLHttpRequest();
            xhr.open("post", "test.php", true);
            xhr.send(fd);
 
            e.preventDefault();
        };
    };
</script>
</html>

相關標籤/搜索

每日一句

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