<!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. npm install 几种不同后缀安装模式的区别

    --save/--save --dev/nothing / -g 区别,及package.json基本目录结构介绍 https://www.jianshu.com/p/e10f981972ff

  2. pycharm调试bug Process finished with exit code -1073740791 (0xC0000409)

    我经常py代码出错 控制台只提示这个 Process finished with exit code -1073740791 (0xC0000409) 但是根本没有报错原因 首先我们应该改一下pych ...

  3. localStorage 用法

    localStorage使用总结   一.什么是localStorage.sessionStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的 ...

  4. C2. Pokémon Army (hard version) 解析(思維)

    Codeforce 1420 C2. Pokémon Army (hard version) 解析(思維) 今天我們來看看CF1420C2 題目連結 題目 略,請直接看原題. 前言 根本想不到這個等價 ...

  5. 利用python3监控服务器状态进行邮件报警

    在正式的生产环境中,我们常常会需要监控服务器的状态,以保证公司整个业务的正常运转,常常我们会用到像nagios.zabbix这类工具进行实时监控,那么用python我们怎么进行监控呢?这里我们利用了p ...

  6. javascript文本全选，反选，多选

    1.首先还是要创建一个案例文件 <div id="one">请选择爱好: <input type="checkbox" id="ch ...

  7. ipython notesbook 默认路径修改

    Windows下,一个很简单的解决小方法! 改目录 前面很多回答已经说了怎么修改目录: 1.cmd: jupyter notebook --generate-config 2.找到 ~\.jupyte ...

  8. Vue项目入门实例

    前言 本文记录Vue2.x + Element-UI + TypeScript语法入门实例 为什么要用TypeScript? 1.TypeScript是JavaScript的超集,利用es6语法,实现 ...

  9. Java中的（String args[]）

    1. DOS下运行 首先,String args[] 这个形式可以直接看出它就是一个字符串数组充当main函数形式参数,args是arguments的缩写,不是关键字(就是一个数组名),可以改但没必要 ...

  10. java socket 字节操作

    原文链接: http://blog.csdn.net/hslinux/article/details/6214594 java与C++之间进行SOCKET通讯要点简要解析 hslinux 0.篇外语 ...