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

随机推荐

4.9---二叉树路径和（CC150）
//注意,1,要判断null:2,要注意ArrayList直接复制会被一起改变.要通过new的方式来操作.public class Solution { public static void main ...
JS 对象遍历
var orgRoot = { 271: {backgroundColor: '#f68f2b', textColor: '#FFFFFF'}, 272: {backgroundColor: '#49 ...
Apache和PHP的安装
最近看了一些教科书,可能是印刷的缘故,只是一个空格没有打印,再加上网上的很多博客文章只是顺手转载,并没有仔细的检查,还有php和apache之间的版本问题,害得我花了4,5小时的时间才搞定环境的搭配. ...
Function接口 – Java8中java.util.function包下的函数式接口
Introduction to Functional Interfaces – A concept recreated in Java 8 Any java developer around the ...
使用Java中的IO流，把A文件里的内容输入到B文件中
我们先创建两个文本文件,out.txt和in.txt,在out.txt中输入"Hello World",然后使用FileInputStream把字符串读取出来,再使用FileOut ...
Java类变量、实例变量的初始化顺序
题目: public class InitTest{ public static int k = 0; public static InitTest t1 = new InitTest("t ...
Enum:Game of Lines(POJ 3668)
画直线题目大意:给定一些点集,要你找两点之间的连线不平行的有多少条数据量比较少,直接暴力枚举,然后放到set查找即可 #include <iostream> #include < ...
HTML 样式表
样式代码样式代码与属性代码区别样式代码必须带单位属性不需要多个样式代码之间用分号隔开同一个样式里面用空格多个属性之间用空格隔开举例 1.背景样式 .r { backgr ...
【leetcode】Word Search II(hard)★
Given a 2D board and a list of words from the dictionary, find all words in the board. Each word mus ...
【编程之美】CPU
今天开始看编程之美 .第一个问题是CPU的使用率控制,微软的问题果然高大上,我一看就傻了,啥也不知道.没追求直接看答案试了一下.发现自己电脑太好了,4核8线程,程序乱飘.加了一个进程绑定,可以控制一个 ...

html5拖拽

html5拖拽的更多相关文章

随机推荐

热门专题