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. DRF教程8-过滤

    在写后端api时,经常需要使用各种过滤条件,可以使用Q对查询集进行过滤,这里介绍一个新玩意儿 以下是基础文档 https://django-filter.readthedocs.io/en/maste ...

  2. airodump-ng 界面参数比较详细的解释

    BSSID: AP(access point)的MAC地址,,如果在client section中BSSID显示为"not associated" ,那么意味着该客户端没有和AP连 ...

  3. OpenCV图像处理之 Mat 介绍

    我记得开始接触OpenCV就是因为一个算法里面需要2维动态数组,那时候看core这部分也算是走马观花吧,随着使用的增多,对Mat这个结构越来越喜爱,也觉得有必要温故而知新,于是这次再看看Mat. Ma ...

  4. Unity3d Attribute 总结(转)

      举两个例子,在变量上使用[SerializeFiled]属性,可以强制让变量进行序列化,可以在Unity的Editor上进行赋值. 在Class上使用[RequireComponent]属性,就会 ...

  5. C#学习笔记：foreach原理

    这篇随笔是对上一篇随笔C#关键字:yield的扩展. 关于foreach 首先,对于 foreach ,大家应该都非常熟悉,这里就简单的描述下. foreach 语句用于对实现  System.Col ...

  6. JAVA基础之Map接口

    个人理解: 个人感觉Map接口以后会经常用到,可以很清晰地查找某个对象,要熟悉其四种遍历方法.特别注意其键值对的键不能是重复的,有想定义有序存取的话,可以使用LinkedHashMap集合.不过定义自 ...

  7. 关于rabbitmq的消息路由的同步问题

    http://www.cnblogs.com/me-sa/archive/2012/11/12/rabbitmq_ram_or_disk_node.html我是看了上面的博客明白了一些原理的,我之前一 ...

  8. Properties-转换流-打印流-序列化和反序列化-Commons-IO工具类

    一.Properties 类(java.util)     概述:Properties 是一个双列集合;Properties 属于map的特殊的孙子类;Properties 类没有泛型,propert ...

  9. 本号讯 | 人工智能手表为帕金森患者带来书写希望；微软翻译发布可实时翻译幻灯片的Presentation Translator

    7 月 12 日,微软成立微软研究院人工智能中心(Microsoft Research AI).这是一个隶属于微软研究体系内的科研和孵化中心,将聚焦于解决最复杂的人工智能挑战. 这支由科学家和工程师组 ...

  10. HDU 3652 B-number （数位DP，入门）

    题意: 如果一个整数能被13整除,且其含有子串13的,称为"B数",问[1,n]中有多少个B数? 思路: 这题不要用那个DFS的模板估计很快秒了. 状态设计为dp[位数][前缀][ ...