html5拖拽

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 49 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gyz418/p/5382792.html

文章标签：

#javascript #ViewUI

本文详细介绍了HTML5拖拽功能的实现过程，包括拖拽开始、拖拽过程、拖拽结束等关键事件的处理。通过实例展示了如何使用jQuery库来简化拖拽功能的开发，并解释了拖拽过程中的原理。

html5拖拽一

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery.js"></script>
    <script>
        $(function () {
            var img =$("#img").get(0);
            var newDiv=$("#newDiv").get(0);
            img.addEventListener("dragstart",img_dragstart,false);
            newDiv.addEventListener("dragover",function(e){e.preventDefault();},false); // 默认行为阻止移动
            newDiv.addEventListener("drop",img_drop,false);
            /*
            * dragstart  拖拽开始
            * drag        过程
            * dragend       结束
            *
            * dragenter   进入目标元素
            * dragover    移动
            * drop        放置
            * dragleave   离开
            * */
            function img_dragstart(e){
                var imgsrc= e.target.src;
                //将地址保存进dataTransfer对象
                e.dataTransfer.setData("text",imgsrc);
                //设置鼠标图像
                e.dataTransfer.setDragImage(e.target,0,0); // 0 0 为鼠标跟图像的坐标距离
            }
            function img_drop(e){
                var src=e.dataTransfer.getData("text");
                var img = new Image();
                img.src=src;
                e.target.appendChild(img);
                //清空dataTransfer中的数据
                e.dataTransfer.clearData("text");
                e.preventDefault();
            }
        });
    </script>
</head>
<body>
    <div id="img" style="width:400px; height: 300px;border:1px solid red;">
        <img id="img2" src="horse.png">
    </div>
    <div id="newDiv" style="width: 400px; height:300px; border: 1px solid green;"></div>
</body>
</html>

html5 拖拽详细版

html

<!DOCTYPE html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  <title></title>
  <style>
    #srcDiv,#tarDiv{width:300px;height:500px;border:1px solid red;float:left;}
    #srcDivTip{width:300px;height:150px;border:1px solid red;clear:both;float:left;}
    #tarDivTip{width:300px;height:150px;border:1px solid red;float:left;}
  </style>
  <script src="drag_1.js"></script>
 </head>

 <body>
  <div id="srcDiv">
    <img id="img" src="img/bike.jpg"/>
  </div>
  <div id="tarDiv"></div>
  <div id="srcDivTip">
    <div id="d_start"></div>
    <div id="d_drag"></div>
    <div id="d_end"></div>
  </div>
  <div id="tarDivTip">
    <div id="d_enter"></div>
    <div id="d_over"></div>
    <div id="d_drop"></div>
    <div id="d_leave"></div>
  </div>
 </body>
</html>

function $(id){
    return document.getElementById(id);
}

function initial(){
    //为img绑定事件:
    //1、开始拖拽时:dragstart
    //2、拖拽过程中:drag
    //3、结束拖拽:dragend

    //为tarDiv绑定事件(目标元素)
    //1、第一次进入到目标元素:dragenter
    //2、在目标元素内移动:dragover
    //3、投放:drop
    //4、源元素移出目标元素:dragleave

    var img = $("img");
    var tarDiv=$("tarDiv");
    //绑定事件
    img.addEventListener("dragstart",img_dragstart,false);
    img.addEventListener("drag",img_drag,false);
    img.addEventListener("dragend",img_dragend,false);

    tarDiv.addEventListener("dragenter",tarDiv_dragenter,false);
    tarDiv.addEventListener("dragover",tarDiv_dragover,false);
    tarDiv.addEventListener("drop",tarDiv_drop,false);
    tarDiv.addEventListener("dragleave",tarDiv_dragleave,false);
}

function tarDiv_dragleave(e){
    $("d_leave").innerHTML="源元素已离开目标区域...";
    e.preventDefault();
}

function tarDiv_drop(e){
    $("d_drop").innerHTML="已经投放...";
    //创建指定图像
    /*var img = new Image();
    img.src="img/flower.png"
    e.target.appendChild(img);*/
    var src=e.dataTransfer.getData("text");
    var img = new Image();
    img.src=src;
    e.target.appendChild(img);
    //清空dataTransfer中的数据
    e.dataTransfer.clearData("text");
    e.preventDefault();
}

function tarDiv_dragover(e){
    var x=e.offsetX;
    var y=e.offsetY;
    $("d_over").innerHTML=x + ":" + y;
    e.preventDefault();
}

function tarDiv_dragenter(e){
    $("d_enter").innerHTML="已经进入到目标区域";
    e.preventDefault();
}

function img_dragstart(e){
    //阻止默认操作
    //e.preventDefault();

    $("d_start").innerHTML = "开始拖拽...";
    $("d_end").innerHTML = "";

    //获取图像路径
    var imgSrc = e.target.src;
    //将地址保存进dataTransfer对象
    e.dataTransfer.setData("text",imgSrc);

    //设置鼠标图像
    e.dataTransfer.setDragImage(e.target,0,0);
}

function img_drag(e){
    var x = e.pageX;
    var y = e.pageY;

    $("d_drag").innerHTML=x +":" + y;
}

function img_dragend(){
    $("d_end").innerHTML="源元素拖放结束";
    $("d_start").innerHTML = "已经结束了";
}

window.addEventListener("load",initial,false);

图片拖拽上传

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>图片拖拽上传</title>
    <style>
        #div1{ width:200px; height:200px; background:red; margin:100px;}
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            var oUl = document.getElementById('ul1');
            oDiv.ondragenter = function(){
               this.innerHTML = '可以释放啦';
            };
            oDiv.ondragover = function(ev){
                ev.preventDefault();
            };
            oDiv.ondragleave = function(){
                this.innerHTML = '将文件拖拽到此区域';
            };
            oDiv.ondrop = function(ev){
                ev.preventDefault();
                var fs = ev.dataTransfer.files;
                  for(var i=0;i<fs.length;i++){
                    if(fs[i].type.indexOf('image')!=-1){
                        var fd = new FileReader();
                        fd.readAsDataURL( fs[i] );
                        fd.onload = function(){
                            var oLi = document.createElement('li');
                            var oImg = document.createElement('img');
                            oImg.src = this.result;
                            oLi.appendChild(oImg);
                            oUl.appendChild(oLi);
                        };
                    }
                    else{
                        alert('亲，请上传图片类型');
                    }
                }
            };

        };
    </script>
</head>
<body>
<div id="div1">将文件拖拽到此区域</div>
<ul id="ul1">
</ul>
</body>
</html>