<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>图片拖放</title>

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

<style type="text/css">

#div1 {width:500px;height:800px;border:1px solid #aaaaaa;}

#div2 {width:500px;height:800px;border:1px solid #aaaaaa;}

</style>

<script>

    // 图片被拖拽起来还没放下时持续触发

function allowDrop(ev)

{

    ev.preventDefault();

}

// 图片被拖拽时触发一次

function drag(ev)

{

    ev.dataTransfer.setData("Text",ev.target.id);

}

//放下图片时触发

function drop(ev)

{

    ev.preventDefault();

    var data=ev.dataTransfer.getData("Text");

    ev.target.appendChild(document.getElementById(data));

}

</script>

</head>

<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">

<img id="drag1" src="./images/download.jpg" draggable="true" ondragstart="drag(event)" width="500" height="500">

</div>

</body>

</html>

html图片拖放的更多相关文章

  1. js图片拖放原理(很简单，不是框架，入门基础)

    <html> <meta> <script src='jquery-1.8.3.min.js'></script> <script> /* ...

  2. HTML5 之拖放(drag与drop)

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...

  3. Javascript图片裁切

    最近浏览了不少网站的图片裁切效果,大部分的做法如下图所示(借用一张脚本之家的图片),通过改变裁切框的大小来选取合适的位置. 但本文介绍的是另外一种裁切方式,裁切框由开发者决定,图片大小由用户决定,通过 ...

  4. 【HTML5】拖放（Drag 和 drop）

    效果图: <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 { ...

  5. 11个好用的jQuery拖拽拖放插件

    这次我们整理一些拖拽播放类型的jQuery插件,这些可能不是很常用,但偶尔会有网站设计项目用到,特别是后台相关的开发项目,这个拖放排序功能一般都会有,所以适合大家收藏起来,方便日后使用.接下来一起看盾 ...

  6. Android----基于多触控的图片缩放和拖动代码实现

    引自:http://www.codefans.net/articles/584.shtml 一个android中自定义的ImageView控制,可对图片进行多点触控缩放和拖动类,包括了对图片放大和图片 ...

  7. Html——拖放

    设置元素为可拖放 首先,为了使元素可拖动,把 draggable 属性设置为 true : <img draggable="true" /> 拖动什么 - ondrag ...

  8. 拖放API中的drag和drop实战

    原文地址:→传送门 写在前面 在HTML5之前,实现拖放功能需要借助mousedown/mousemove/mouseover/mouseout/mouseup等鼠标事件来完成,HTML5中拖放API ...

  9. Html5学习3（拖放、Video（视频）、Input类型(color、datetime、email、month 、number 、range 、search、Tel、time、url、week )）

    1.Html拖放 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> < ...

随机推荐

  1. 【应用服务 App Service】Azure 应用服务测试网络访问其他域名及请求超时限制（4分钟 ≈ 230秒）

    测试App Service是否可以访问其他DNS 当应用服务(Azure App Service)创建完成后,想通过ping命令来查看是否可以访问其他站点或解析DNS,但是发现ping命令无法使用.这 ...

  2. MySQL数据库安装后的安全设置

    导语: 已经通过报的方式安装了mysql,装完之后有些安全设置必须要做. 装完以后数据库已经可以使用了,但是有安全风险. 风险在访问数据库不需要任何信息就可以访问. [10:17:02 root@C8 ...

  3. spring-boot-route（二十二）实现邮件发送功能

    在项目开发中,除了需要短信验证外,有时候为了节省 短信费也会使用邮件发送.在Spring项目中发送邮件需要封装复杂的消息体,不太方便.而在Spring Boot项目中发送邮件就太简单了,下面一起来看看 ...

  4. CSS中-moz、-ms、-webkit、-o的意思

    -moz代表firefox浏览器私有属性 -ms代表ie浏览器私有属性 -webkit代表safari.chrome浏览器私有属性 -o代表opera浏览器私有属性 上述这些是为了兼容老版本的写法:

  5. Redis学习笔记（二）——Keys通用操作

    1.查询所有key: keys * 2.*通用符(代表0或多),查询所有以n(*)开头的key: keys n* 3.?通用符(代表1个字符): key n? 4.del删除key [key1 key ...

  6. 20201103_notepad++修改文件保存的默认格式

    修改notepad++文件保存的默认格式 点开 设置 ==> 首选项 1.  修改默认语言为要默认保存的文件格式 2. 将默认目录下的使用新样式对话框取消勾选  

  7. JS中this的指向性问题

    一.this用于访问当前方法所属的对象,谁调用的方法,方法就属于谁 // 普通函数 let obj = { a : 12, fn() { console.log(this == obj); // tr ...

  8. RabbitMQ相关概念的理解

    1.什么是消息? 消息就是程序(服务)之间传递的数据(图/文/声/像). 2.MQ是什么? MQ(MessageQueue)是指消息队列亦或消息总线.是消息的容器,这个容器的策略是FIFO(先进先出) ...

  9. NS-3环境布置及安装

    MMP的,入坑NS3了,LTE是什么鬼!!! ubantu安装NS3解决依赖环境 一堆安装包需要安装,试了N多次(CentOS没安装明白,转而ubantu).利用脚本进行按装. 貌似得先对本机软件进行 ...

  10. python00

    # Python* [什么是 Python 生成器?](#什么是-Python-生成器)* [什么是 Python 迭代器?](#什么是-Python-迭代器)* [list 和 tuple 有什么区 ...