html5拖拽

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>

html5拖拽的更多相关文章

Html5拖拽复制
拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...
HTML5 拖拽复制功能的实现方法
Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...
每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
HTML5拖拽功能中 dataTransfer对象详解
有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...
基于html5拖拽api实现列表的拖拽排序
基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...
html5拖拽事件 xhr2 实现文件上传含进度条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
html5拖拽总结
拖拽(Drag 和 drop)是 HTML5 标准的组成部分.拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. Internet Explorer 9.Firefox.Opera 12.Chrom ...
HTML5拖拽实例
最近应该会用到,借用一下......小妹儿,你又变懒了拖拽相关属性 draggable属性是html5的全局属性,是html5支持拖放操作的方式之一,用来表示元素是否可以被拖放,draggable有 ...
html之div拖拽，html5拖拽
html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp

随机推荐

交叉编译inetutils并配置telnet服务
inetutils集成了许多网络客户和服务程序,主要有,finger, ftp, ftpd, rcp, rexec, rlogin, rlogind, rsh, rshd, syslog,syslog ...
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
/*常用的字符串输出函数 * * echo() 输出字符串 * print() 输出一个或多个字符串 * die() 输出一条信息,并退出当前脚本 * printf() 输出格式化字符串 * spri ...
时间和日期控件（Calendar1）
取得选择的: taskItem["data"] = Calendar1.SelectedDate.ToShortDateString();
POJ 1062 ( dijkstra )
http://poj.org/problem?id=1062 一个中文题,一个多月之前我做过,当时我是用搜索写的,不过苦于卡在无法确定等级关系,所以就错了. 看了别人的博客后,我还是不是很理解所谓的枚 ...
jQuery DataTables && Django serializer
jQuery DataTables https://www.datatables.net 本文参考的官方示例 http://datatables.net/release-datatables/exam ...
XPath 教程
http://www.w3school.com.cn/xpath/xpath_syntax.asp
[Android]drawable-nodpi文件夹的作用
把一些不能被拉伸的图片放在 drawable-nodpi 中,此图片将不会被放大,以原大小显示. 看下图: 这两个图片被放到了drawable-nodpi 中在不同分辨率下的显示大小是一样的,不会被 ...
如何让VS2013编写的程序
总体分c++程序和c#程序 1.c++程序这个用C++编写的程序可以经过设置后在XP下运行,主要的“平台工具集”里修改就可以. 额外说明:(1)程序必须为Dotnet 4.0及以下版本.(XP只支持 ...
【网络】VPN
VPN: 来自百度百科虚拟专用网络的功能是:在公用网络上建立专用网络,进行加密通讯.在企业网络中有广泛应用.VPN网关通过对数据包的加密和数据包目标地址的转换实现远程访问.VPN有多种分类方式,主要 ...
20145213《Java程序设计学习笔记》第六周学习总结
20145213<Java程序设计学习笔记>第六周学习总结说在前面的话上篇博客中娄老师指出我因为数据结构基础薄弱,才导致对第九章内容浅尝遏止地认知.在这里我还要自我批评一下,其实我事后 ...

html5拖拽

html5拖拽的更多相关文章

随机推荐

热门专题