html5的鼠标拖拽

鼠标拖拽

<!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>

拖拽文件上传

<!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>

html5的鼠标拖拽

相关文章