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>
js
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 ...
- ndk学习8: 编译动态库
目录: 手工编译动态库 ndk-build编译动态库(Eclipse环境) 手工编译静态库 老规矩还是先手工操作,知其然并知其所以然 需要用到的核心命令: gcc -g -c -fpic -W ...
- powerdesigner反向
1.Could not initial JVM不能初始化 :要求安装32位的JDK,把path指向32的安装目录 2.Non SQL Error : Could not load class orac ...
- ubuntu安装LAMP环境
1. LAMP 的安装 sudo apt-get install apache2 mysql-server mysql-client php5 php5-gd php5-mysql 由于LAMP大部分 ...
- python——批量下载图片
前言 批量下载网页上的图片需要三个步骤: 获取网页的URL 获取网页上图片的URL 下载图片 例子 from html.parser import HTMLParser import urllib.r ...
- 第三方登录（QQ登录）开发流程详解
原文:http://www.cnblogs.com/it-cen/p/4338202.html 近排由于工作的繁忙,已经一个星期没写博文做分享了,接下来我对网站接入第三方登录----QQ登录的实现逻辑 ...
- Linq查询非泛型集合要指定Student类型（比如List）
#region Linq to 集合查询非泛型集合要指定Student类型 //ArrayList list = new ArrayList(); //li ...
- 先进的React GUI编辑器 — Structor，所见即所得！
先进的React GUI编辑器 — Structor https://helmetrex.com/ 手把手教你基于 ES6 架构自己的 React Boilerplate 项目 http://www. ...
- spring + myBatis 常见错误：注解事务不回滚
最近项目在用springMVC+spring+myBatis框架,在配置事务的时候发现一个事务不能回滚的问题. 刚开始配置如下:springMVC.xml配置内容: spring.xml配置内容 从上 ...
- ios Coredata 的 rollback undo 等事物处理函数
首先说明 ios 中 NSManagedObjectContext 默认的 undoManager是nil的,就是说 undo 和 redo 都是没用的. 但是 rollback函数和reset函数是 ...