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
随机推荐
- Hibernate中的GetCurrentSession()方法
从3.0.1版本开 始,Hibernate增加了SessionFactory.getCurrentSession()方法. 采用getCurrentSession()创建的session在commit ...
- Genymotion自动化启动
一.启动方式 命令行: player.exe --vm-name [模拟器名称] 例子: "D:\Program files\Genymobile\Genymotion\player ...
- MySQL 查看最大连接数, 当期连接数.
查看最大连接数 select VARIABLE_VALUE from information_schema.GLOBAL_VARIABLES where VARIABLE_NAME='MAX_CONN ...
- wordpress迁移到本地404错误
线上wordpress迁移到本地可能出现找不到页面问题,可能是因为配置了url静态化,同时wordpress的文章链接是存在数据库中的 下面替换掉原来线上的文章链接,其中数据库名为wordpress ...
- Linux查看文件编码格式及文件编码转换
Linux查看文件编码格式及文件编码转换 如果你需要在Linux 中操作windows下的文件,那么你可能会经常遇到文件编码转换的问题.Windows中默认的文件格式是GBK(gb2312),而L ...
- git中找回丢失的对象
本文转载自:http://gitbook.liuhui998.com/5_9.html 译者注: 原书这里只有两个链接: Recovering Lost Commits Blog Post,Recov ...
- python模块介绍- collections(5)-OrderedDict 有序字典
1.3.5 OrderedDict 有序字典 OrderedDict是dict的子类,它记住了内容添加的顺序. import collections print 'Regular dictionary ...
- linux skill
linux console终端乱码解决 1.console终端乱码 在/etc/profile文件的最后一行添加如下内容: export LC_ALL="zh_CN.GB18030" ...
- 解读Unity中的CG编写Shader系列四（unity中的圆角矩形shader）
转自 http://www.itnose.net/detail/6097625.html 上篇文章中我们掌握了表面剔除和剪裁模式 这篇文章将利用这些知识实现一个简单的,但是又很常用的例子:把一张图片做 ...
- ACM/ICPC 之 网络流入门-Ford Fulkerson与SAP算法(POJ1149-POJ1273)
第一题:按顾客访问猪圈的顺序依次构图(顾客为结点),汇点->第一个顾客->第二个顾客->...->汇点 //第一道网络流 //Ford-Fulkerson //Time:47M ...