源码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>html5拖拽效果</title>
    <style>
        #d1 {
            width: 400px;
            height: 400px;
            border: solid black 1px;
            float: left;;
        }

        #d2 {
            width: 400px;
            height: 400px;
            border: solid black 1px;
            float: right;;
        }
    </style>
</head>

<body>
<div id="d1">
    <img src="smallPicture.png" id="myImage">
</div>
<div id="d2"></div>
</body>
</html>
<script type="text/javascript">
    var myImage = document.getElementById("myImage");//获取源元素（图片）对象

    myImage.addEventListener("dragstart", MyDrageStart);//对源元素添加开始拖拽监听事件

    function MyDrageStart(event) {
        var imgData = myImage.src;
        var trans = event.dataTransfer;//获得dataTransfer对象
        trans.setData('text', imgData);
//设置源数据（即将源数据放置到dataTransfer中，个人理解即将myImage的是src赋给dataTransfer，相当于一个中间存储的介质）
    }

    var div2 = document.getElementById("d2");
    div2.addEventListener("dragover", MyDragOver);//鼠标每次进入目标元素时触发
    div2.addEventListener("drop", MyDrop);//实现拖放效果时触发，即放下的时候触发

    function MyDragOver(event) {
        event.preventDefault();//去除默认的拖放效果，即html5默认是不允许进行拖放的
    }

    function MyDrop(event) {
        var trans = event.dataTransfer;
        var mysrc = trans.getData("text");//设置目标元素数据
        div2.innerHTML = "<img src=" + mysrc + ">";
        trans.clearData("text");//尽量还是要加上这个，因为dataTransfer是会占用内存的，若是一直不清空会影响浏览器的执行效率
        var div1=document.getElementById("d1");
        div1.removeChild(myImage);//实现将源元素（图片）移到目标元素，而原来的源元素（图片）消失的效果
    }

</script>
效果图：
移动前：

移动后：

												


											
javaScript+html5实现图片拖拽的更多相关文章
	

    
								
  1. HTML5多图片拖拽上传带进度条
		
    前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载 ...
    
		
    2. 
						
  2. HTML5——将图片拖拽上传
		
    如下图所示: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8">  ...
    
		
    3. 
						
  3. HTML5图片拖拽预览原理及实现
		
    一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...
    
		
    4. 
						
  4. html5  Sortable.js 拖拽排序源码分析
		
    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...
    
		
    5. 
						
  5. 第一百三十五节，JavaScript，封装库--拖拽
		
    JavaScript,封装库--拖拽 封装库新增1个拖拽方法 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:一般需要在css文件将元素里的某一个区块光标设置成提示可以拖拽, ...
    
		
    6. 
						
  6. 自制一个H5图片拖拽、裁剪插件（原生JS）
		
    前言 如今的H5运营活动中,有很多都是让用户拍照或者上传图片,然后对照片加滤镜.加贴纸.评颜值之类的.尤其是一些拍照软件公司的运营活动几乎全部都是这样的. 博主也做过不少,为了省事就封装了一个简单的图 ...
    
		
    7. 
						
  7. canvas 图片拖拽旋转之二——canvas状态保存(save和restore)
		
    引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...
    
		
    8. 
						
  8. canvas 图片拖拽旋转之一——坐标转换translate
		
    引言 对canvas中绘制的图片进行旋转操作,需要使用ctx.translate变换坐标系,将图片旋转的基点设为坐标系的原点,然后ctx.rotate旋转. 这个时候,因为canvas坐标系发生了旋转 ...
    
		
    9. 
						
  9. Android 仿微信朋友圈发表图片拖拽和删除功能
		
    朋友圈实现原理 我们使用 Android Device Monitor 来分析朋友圈发布图片的界面实现原理.如果需要分析其他应用的界面实现也是采用这种方法哦. 打开 Android Device Mo ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 第k大元素
			
    在数组中找到第k大的元素 样例 给出数组[9,3,2,4,8],第三大的元素是4 给出数组 [1,2,3,4,5],第一大的元素是5,第二大的元素是4,第三大的元素是3,以此类推 注意 你可以交换数组 ...
    
			
    2. 
						
  2. python 转义字符 html 爬虫
			
    用python的requests包 抓取某些网页时,返回的html中,一些字段含有一些 转义字符 \\\\\\\ 这些转义字符给我们后期处理带来一些麻烦, 比方说 运行js等 python用print ...
    
			
    3. 
						
  3. idea快捷键的设置
			
    因为开始学java被培训机构里的无良老师给带偏,"染上了"MyEclipse的快捷键"恶习",于是很难改了. 所以,在使用idea时,要设置快捷键了,快点适应之 ...
    
			
    4. 
						
  4. goaccess 通过jsonpath 转换为prometheus metrics
			
    goaccess 是一个不错的日志分析工具,包含了json 数据同时支持基于websocket 的实时数据处理,当然我们可以通过jsonpath 的exporter 转换为支持promethues 的 ...
    
			
    5. 
						
  5. esxi5 的tart命令使用注意点
			
    esxi5.0 注意tar命令参数使用和centos6稍微有点不一样,注意下 注意需要把-f参数单独分离出来,紧接着文件.   而不能和cz命令一起用 ~ # touch abc.txt ~ # ec ...
    
			
    6. 
						
  6. Netty学习记录
			
    一.Netty简介 Netty 是一个基于 JAVA NIO 类库的异步通信框架,它的架构特点是:异步非阻塞.基于事件驱动.高性能.高可靠性和高可定制性. Netty 是一个 NIO client-s ...
    
			
    7. 
						
  7. Transaction rolled back because it has been marked as rollback-only  原因  和解决方案
			
    产生原因  , 1 serviceA 调用 serviceB 然后 B  抛出异常 ,B 所在的 事物 回滚,B 把当前可写 事物标记成 只读事物 , 2 如果 A 和B 是在 同一个事物环境,并且  ...
    
			
    8. 
						
  8. Java day1
			
    1. 学习java,首先是jdk的安装,JDK是 Java 语言的软件开发工具包,主要用于移动设备.嵌入式设备上的java应用程序.JDK是整个java开发的核心,它包含了JAVA的运行环境(JVM+ ...
    
			
    9. 
						
  9. sublime text 3 vue 语法高亮
			
    1.下载文件 链接 https://github.com/vuejs/vue-syntax-highlight 2.sublime菜单栏->Preferences->Browse Pack ...
    
			
    10. 
						
  10. ubuntu16.04下docker安装和简单使用
			
    前提条件 操作系统 docker-ce支持的ubuntu版本: Bionic 18.04 (LTS) Xenial 16.04 (LTS) Trusty 14.04 (LTS) 卸载旧版本docker ...
    
			
    11.