拖拽图片到另一个div里
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#taa{width: 300px;height: 300px;background: #DEDEDE;}
</style>
</head>
<body>
<!--第一步 设置 拖拽的属性 draggable="true" 绑定drag事件-->
<img src="img/a.jpg" alt="mytu" draggable="true" id="mytu"/>
<!--第二步 设置 放置位置 触发事件 dragover-->
<!--第三步 设置 放置之后 触发事件 dragover-->
<div id="taa"></div>
</body>
<script src="JS/tuo.js"></script>
</html>
jQuery代码
(function(){
/*------------------节点-------------- */
var mytu=document.getElementById("mytu");
var taa=document.getElementById("taa");
/*------------------事件锁定-------------- */
//ondragstart - 用户开始拖动元素时触发
//ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
//ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
mytu.ondragstart=drag;//拖动什么
taa.ondragover=dragover;//放到何处
taa.ondrop=drop;//进行放置
/*------------------函数------------- */
function drag(ev){
//通过ondragstart事件存储 当前节点ID到ev.dataTransfer里面
//数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
ev.dataTransfer.setData("Text",ev.target.id);
console.log("hollk");
}
function dragover(){
event.preventDefault();
//添加一个默认事件的取消 使得drop生效
console.log("koml");
}
function drop(ev){
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
console.log("huam");
}
})();
- 释放目标时触发的事件:
- ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
- ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
- ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
- ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
拖拽图片到另一个div里的更多相关文章
- 在viewPager中双指缩放图片，双击缩放图片，单指拖拽图片
我们就把这个问题叫做图片查看器吧,它的主要功能有: (项目地址:https://github.com/TZHANHONG/ImageViewer/releases/tag/1.0,里面的MyImage ...
- 基于html5可拖拽图片循环滚动切换
分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="s ...
- android 拖拽图片&拖动浮动按钮到处跑
来自老外: 拖拽图片效果 方法一: 布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLa ...
- C# TreeView 拖拽节点到另一个容器Panel中简单实现
C# TreeView 拖拽节点到另一个容器Panel中简单实现 用了这么久C#拖拽功能一直没有用到也就没用过,今天因为项目需要,领导特地给我简单讲解了下拖拽功能,真是的大师讲解一点通啊.特地写一篇博 ...
- 如何让一个div里面的div垂直居中？
如何让一个div里面的div垂直居中? 如何让上面灰色有文字那个div和背景图标垂直居中,不管屏幕大小有好大,始终在垂直方向上的中间.上面有整个布局和样式表,谢谢高手指点 CSS3时代当然要用CSS3 ...
- 模拟拖拽图片 碰撞检测 DOM 鼠标事件 闭包
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...
- Jquery 多行拖拽图片排序 jq优化
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js 禁止右击保存图片，禁止拖拽图片
禁止鼠标右键保存图片 <img src="" oncontextmenu="return false;"> 禁止鼠标拖动图片 <img src ...
- Hyper-V无法文件拖拽解决方案~~~这次用一个取巧的方法架设一个FTP来访问某个磁盘，并方便的读写文件
异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 服务器相关的知识点:http://www.cnblogs.com/dunitia ...
随机推荐
- Codeforces 1163D（kmp、dp）
要点 \(dp[i][j][k]\)表示主串已经到第\(i\)位时,\(s\)匹配在\(j\)位.\(t\)匹配在\(k\)位的最大得分 本来就要试填一层循环,如果转移也写在循环里的化复杂度承受不了, ...
- Uvalive-4494-(数位dp)
题意:求a->b中的二进制出现过多少个1,很显然的数位dp,对于某一位来说,如果这位是0,那么dp[i]=dp[i-1] 如果这一位是1 那么dp[i]=dp[i-1]+1<<(p ...
- Linux .Net Core
Linux .Net Core自宿主应用程序瘦身记 一,.NET Core 自宿主应用程序个头有点大 发布.NET Core应用程序有两个方式,一种是“便携式”,一种是“自宿主式”.便携式发布时,目标 ...
- 管道是如何随着WebHost的开启被构建出来的？
管道是如何随着WebHost的开启被构建出来的? 注册的服务器和中间件共同构成了ASP.NET Core用于处理请求的管道, 这样一个管道是在我们启动作为应用宿主的WebHost时构建出来的.要深刻了 ...
- 关于AQS——独占锁的相关方法（一）
一.序言 Lock接口是juc包下一个非常好用的锁,其方便和强大的功能让他成为synchronized的一个很好的替代品. 我们常用的一个Lock的实现类(好像也是唯一一个只实现了Lock接口的类) ...
- scut 125. 笔芯回文
https://scut.online/p/125 看数据量,这题可能是O(n^2)的dp 也可能是区间dp,但是区间dp一般复杂度是O(n^3),虽然也可以优化,但是比赛的时候那么多人“秒”了,应该 ...
- 【.Net MVC4 connectionString设置】获取SQL server数据库的连接字符串
第一步:创建向导文件 在桌面创建一个txt文件,并将文件后缀改成“.udl”. 第二步:选择“提供程序”tab页 双击新创建的“.udl”文件,进入后选择“提供程序”tab页,选择“Micros ...
- 把一个HashMap的值全部取出来，放到两个数组中
先是从数据库中获取所有的值,返回一个HashMap类型的数据: <pre name="code" class="java"> private Has ...
- Java基础：（八）异常
Throwable可以用来表示任何可以作为异常抛出的类,分为两种:Error和Exception.其中Error用来表示JVM无法处理的错误, Exception又分为两种: 受检异常:需要用try. ...
- GNUPG
PGP (Pretty Good Privacy) 是由 Phil Zimmermann 于 1991 开发的一个用于数据加密和数字签名的程序,由于被广泛应用以至于后来形成一个开放的标准 OpenPG ...