<!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. Linux命令之tab 键补全

    tab 键补全 tab 键可以实现命令及路径等补全,提高输入效率,避免出错 命令补全 用户给定的字符串只有一条惟一对应的命令,直接补全, 两次Tab会给出列表 内部命令: 外部命令:bash根据PAT ...

  2. Spring Boot 学习摘要--关于配置

    date: 2019-12-27 09:00:00 updated: 2019-12-30 13:20:00 Spring Boot 学习摘要--关于配置 学习教程来自:B站 尚硅谷 1. 关于配置 ...

  3. Hive sql函数

    date: 2018-11-16 19:03:08 updated: 2018-11-16 19:03:08 Hive sql函数 一.关系运算 等值比较: = select 1 from dual ...

  4. localStorage.getItem得到的是[object Object] 的解决方案

    设计背景: 购物车要实现本地存储,避免刷新页面数据丢失 实现方案: 1,本地储存,进入页面获取本地数据,在进行数据操作 2,每操作一次数据就将数据传给后台进行保存,(操作数据多,用户量大对服务器造成压 ...

  5. 【1】TensorFlow光速入门-tensorflow开发基本流程

    本文地址:https://www.cnblogs.com/tujia/p/13862339.html 系列文章: [0]TensorFlow光速入门-序 [1]TensorFlow光速入门-tenso ...

  6. new 正则

    在做项目的过程中,使用正则表达式来匹配一段文本中的特定种类字符,是比较常用的一种方式,下面是对常用的正则匹配做了一个归纳整理. 匹配中文:[\u4e00-\u9fa5] 英文字母:[a-zA-Z]数字 ...

  7. 当浏览器窗口大小发生变化时，重新绘制JsPlumb中的线条、端点

    1 window.addEventListener('resize', () => { 2 this.plumbInstance.repaintEverything() 3 }) 参考文章:ht ...

  8. STM32入门系列-GPIO结构

    已经了解了STM32 GPIO的基本概念及引脚分类.现在来看下STM32 GPIO内部的结构是怎样的.IO端口位的基本结构如下图所示. 从图中可以看出GPIO内部结构还是比较复杂的,只要将这张GPIO ...

  9. 2. DRF 认证、权限、限流、分页、过滤、序列 化

    2.1 user/urls.py   ModelViewSet注册路由三部曲 from django.urls import include, path from user import views ...

  10. pandas神器操作excel表格大全（数据分析数据预处理）

    使用pandas库操作excel,csv表格操作大全 关注公众号"轻松学编程"了解更多,文末有公众号二维码,可以扫码关注哦. 前言 准备三份csv表格做演示: 成绩表.csv su ...