html5---拖放demo----拖放图片

1、图片的拖放

效果图：

html代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>drag drog</title><style type="text/css">#box1{float: left;width: 300px;height: 300px;background: gray;}#box2{float: left;width: 300px;height: 300px;background: red;}img{width: 100px;}</style><script type="text/javascript" src="js/drag.js" ></script></head><body><div id="box1"></div><div id="box2"></div><img id="img1" src="img/0.jpg"/></body>
</html>

js代码

var boxDiv,boxDiv2,img;
window.onload = function(){boxDiv = document.getElementById("box1");boxDiv2 = document.getElementById("box2");img = document.getElementById("img1");boxDiv.ondragover = function(e){//阻止默认的事件e.preventDefault();}boxDiv2.ondragover = function(e){//阻止默认的事件e.preventDefault();}img.ondragstart = function(e){//获取拖放的图片的数据e.dataTransfer.setData("timg","img1");}boxDiv.ondrop = function(e){e.preventDefault();var timg = document.getElementById(e.dataTransfer.getData("timg"));//当图片拖放在此区域时，将图片添加在此区域e.target.appendChild(timg);}boxDiv2.ondrop = function(e){e.preventDefault();var timg = document.getElementById(e.dataTransfer.getData("timg"));e.target.appendChild(timg);}
}

2、本地图片拖放

效果：

html代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box{width: 400px;height: 400px;background: gray;}img{width: 100px;height: 100px;}</style><script type="text/javascript" src="js/location.js" ></script></head><body><div id="box"></div></body>
</html>

js代码：

var box;window.onload = function(){box = document.getElementById("box");msg= document.getElementById("msg");box.ondragover = function(e){e.preventDefault();}box.ondrop = function(e){e.preventDefault();
//      showData(e.dataTransfer);var f = e.dataTransfer.files[0];var fileReader = new FileReader();fileReader.readAsDataURL(f);fileReader.onload = function(e){
//          showData(e.target);box.innerHTML = "<img src=\""+fileReader.result + "\"/>"}}
}
//function showData(obj){
//  var s = "";
//  for(var k in obj){
//      s += k + ":" + obj[k] + "<br/>";
///}
//msg.innerHTML = s;
//}

html5---拖放demo----拖放图片相关推荐

html5如何实现拖拽,HTML5 如何实现拖放
拖放是一种常见的特性,也就是抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 拖放事件拖放是由拖动与释放两部分组成,拖放事件也分为被拖动元素的相关事件,和容器 ...
HTML5 如何实现拖放'N'拖放
在网络开发人员需要掌握的所有技术中,看起来最容易造成混淆和潜在问题的是拖拽. 这不是一项新技术,它已存在多年,但许多开发人员仍然执着于基于jQuery的旧方法,以牵连复杂(有时很慢且不准确)的拖放模拟 ...
Ajax拖放页面元素(图片)
最近了解了一点YUI的控件知识.先做个Ajax拖放页面元素(图片)以便学习参考. 现在有一些网站如QQ空间,都允许用户自定义模块,可以任意拖动模块到各个地方去.YUI在这一方面做得比较好.下面以一组图 ...
html5css3菜鸟教程,HTML5+CSS3实现拖放(Drag and Drop)示例
本文简单介绍一下HTML5的拖放实现.MXGHTML5中文学习网 - HTML5先行者学习网拖放(Drag 和 drop)是 HTML5 标准的组成部分.MXGHTML5中文学习网 - HTML5先 ...
分享一个非常有用的HTML5+CSS3响应式图片案例
随着Retina屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种 ...
html5 canvas 加载图片
html5 canvas 加载图片视频 https://www.bilibili.com/video/BV19E411G7Vj?p=30 https://www.bilibili.com/video ...
HTML5怎么让图片和文字重叠,利用HTML5实现全屏图片文字过渡切换特效
特效描述:利用HTML5实现全屏图片文字过渡切换特效.利用HTML5实现全屏图片文字过渡切换特效代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Masupitami Wal ...
java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
java canvas 缩放图片_详解如何用HTML5 Canvas API控制图片的缩放变换
摘要:这篇HTML5栏目下的"详解如何用HTML5 Canvas API控制图片的缩放变换",介绍的技术点是"html5_canvas.canvas.Html5.控制图片 ...
html5canvas绘制图片源码,HTML5 CANVAS：绘制图片
HTML5 CANVAS:绘制图片通过前面的学习,我们现在已经可以在HTML5 canvas中绘制图形和文字,并给它们设置一些样式.我们还可以在中绘制图片.用于在作为绘制源的图片可以是下面的几种元素 ...

html5---拖放demo----拖放图片

html5---拖放demo----拖放图片相关推荐

最新文章

热门文章