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");
}
})();
    • 在拖动目标上触发事件 (源元素):

      • ondragstart - 用户开始拖动元素时触发
      • ondrag - 元素正在拖动时触发
      • ondragend - 用户完成元素拖动后触发
    • 释放目标时触发的事件:

      • ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
      • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
      • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
      • ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

拖拽图片到另一个div里的更多相关文章

  1. 在viewPager中双指缩放图片,双击缩放图片,单指拖拽图片

    我们就把这个问题叫做图片查看器吧,它的主要功能有: (项目地址:https://github.com/TZHANHONG/ImageViewer/releases/tag/1.0,里面的MyImage ...

  2. 基于html5可拖拽图片循环滚动切换

    分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="s ...

  3. android 拖拽图片&拖动浮动按钮到处跑

    来自老外: 拖拽图片效果 方法一: 布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLa ...

  4. C# TreeView 拖拽节点到另一个容器Panel中简单实现

    C# TreeView 拖拽节点到另一个容器Panel中简单实现 用了这么久C#拖拽功能一直没有用到也就没用过,今天因为项目需要,领导特地给我简单讲解了下拖拽功能,真是的大师讲解一点通啊.特地写一篇博 ...

  5. 如何让一个div里面的div垂直居中?

    如何让一个div里面的div垂直居中? 如何让上面灰色有文字那个div和背景图标垂直居中,不管屏幕大小有好大,始终在垂直方向上的中间.上面有整个布局和样式表,谢谢高手指点 CSS3时代当然要用CSS3 ...

  6. 模拟拖拽图片 碰撞检测 DOM 鼠标事件 闭包

    <!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...

  7. Jquery 多行拖拽图片排序 jq优化

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. js 禁止右击保存图片,禁止拖拽图片

    禁止鼠标右键保存图片 <img src="" oncontextmenu="return false;"> 禁止鼠标拖动图片 <img src ...

  9. Hyper-V无法文件拖拽解决方案~~~这次用一个取巧的方法架设一个FTP来访问某个磁盘,并方便的读写文件

    异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 服务器相关的知识点:http://www.cnblogs.com/dunitia ...

随机推荐

  1. ES6新特性使用小结(五)

    十二.class 与 extends ①.类的基本定义和生成实例 { class Parent{ constructor(name='Lain'){ //定义构造函数 this.name = name ...

  2. 2017百度之星程序设计大赛 - 复赛 Arithmetic of Bomb

    http://acm.hdu.edu.cn/showproblem.php?pid=6144 解法:一个简单的模拟 #include <bits/stdc++.h> using names ...

  3. ssh登录出现 Host key verification failed. 问题

    我们使用ssh链接linux主机时,可能出现“Hostkey verification failed.“的提示,ssh连接不成功.可能的提示信息如下: @@@@@@@@@@@@@@@@@@@@@@@@ ...

  4. springboot启动提示缺少数据源

    If you want an embedded database please put a supported one on the classpath. If you have database s ...

  5. Java的API及Object类、String类、字符串缓冲区

    Java 的API 1.1定义 API: Application(应用) Programming(程序) Interface(接口) Java API就是JDK中提供给开发者使用的类,这些类将底层的代 ...

  6. 几种常用排序算法代码实现和基本优化(持续更新ing..)

    插入排序(InsertSort): 插入排序的基本思想:元素逐个遍历,在每次遍历的循环中,都要跟之前的元素做比较并“交换”元素,直到放在“合适的位置上”. 插入排序的特点:时间复杂度是随着待排数组的有 ...

  7. 准备Kendo UI 开发环境

    准备 首先你需要从 Telerik 网站下载试用版开发包,注意需要注册后才能下载. 下载后直接解压后包含下面几个文件和目录: ./examples – 示例. /js – minified 化后的 J ...

  8. Junit-@Annotation-动态代理-类加载器

    一.测试单元     概述:用于测试JAVA代码的工具类,已内置在Eclipse中;     格式:         1.在方法的上面添加@Test;         2.对被测试的方法的要求:权限- ...

  9. deb软件安装

    deb是debian linux的安装格式,跟red hat的rpm非常相似,最基本的安装命令是:dpkg -i file.deb dpkg 是Debian Package的简写,是为Debian 专 ...

  10. Android开发学习——小细节注意

    Android中通过Intent调用其他应用的方法(转) Android中两种序列化方式的比较Serializable和Parcelable http://www.jcodecraeer.com/a/ ...