html5的鼠标拖拽

发布时间:2020-02-23 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了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的鼠标拖拽全部内容,希望文章能够帮你解决html5的鼠标拖拽所遇到的程序开发问题。

其他人正在看

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478
标签: