<!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. 【Azure云服务 Cloud Service】Cloud Service的实例(VM)中的服务描述Software Protection 与 Windows Defender， 如何设置Windows Defender Antivirus服务

    1)Software Protection 与 Windows Defender是两个独立的服务.在Windows 服务中他们的描述分别为 Software Protection Enables th ...

  2. python的各种库的用法

    scipy.io 用于输入和输出数据的操作,可操作matlab的.mat文件. (1)加载.mat文件的数据 import scipy.io as sci data_dir = sci.loadmat ...

  3. 《JavaScript高级程序设计》——第四章 变量、作用域和内存管理

    JavaScript变量可以用保存两种类型的值:基本类型值和引用类型值.基本类型的值源自以下基本类型数据:Undefined.Null.Boolean.Number和String. 从一个变量向另一个 ...

  4. CentOS 7 搭建 Ceph 集群（nautilus 版本）

    搭建 Ceph 分布式集群( nautilus 版本 ) 一.服务器环境说明 主机名 角色 IP地址 ceph-admin ceph-deploy 192.168.92.21 ceph-node1 m ...

  5. httpx和requests之间有什么区别？

    requests只能发送同步请求,httpx能够发送同步和异步请求. httpx的api和requests是兼容的,切换的成本几乎是零.在异步模式下,测试大量接口的话,httpx的速度是能够显著得到提 ...

  6. ASP.NET Core Authentication系列（二）实现认证、登录和注销

    前言 在上一篇文章介绍ASP.NET Core Authentication的三个重要概念,分别是Claim, ClaimsIdentity, ClaimsPrincipal,以及claims-bas ...

  7. element ui实现form验证起始时间不能大于结束时间

    <el-form-item label="开始时间" :label-width="formLabelWidth" prop="startTime ...

  8. 十八般武艺玩转GaussDB(DWS)性能调优（三）：好味道表定义

    摘要:表结构设计是数据库建模的一个关键环节,表定义好坏直接决定了集群的有效容量以及业务查询性能,本文从产品架构.功能实现以及业务特征的角度阐述在GaussDB(DWS)的中表定义时需要关注的一些关键因 ...

  9. 调度《Taint（污点） 和 Toleration（容忍）》

    节点亲和性(详见这里),是 pod 的一种属性(偏好或硬性要求),它使 pod 被吸引到一类特定的节点.Taint 则相反,它使 节点 能够 排斥 一类特定的 pod. Taint 和 tolerat ...

  10. 9_Palindrome Number

    9.Palindrome Number Determine whether an integer is a palindrome. An integer is a palindrome when it ...