<!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命令之命令别名

    对于经常执行的较长的命令,可以将其定义成较短的别名,以方便执行 显示当前shell进程所有可用的命令别名 [04:33:43 root@C8[ ~]#alias alias cp='cp -i' al ...

  2. Learning Attention-based Embeddings for Relation Prediction in Knowledge Graphs

    这篇论文试图将GAT应用于KG任务中,但是问题是知识图谱中实体与实体之间关系并不相同,因此结构信息不再是简单的节点与节点之间的相邻关系.这里进行了一些小的trick进行改进,即在将实体特征拼接在一起的 ...

  3. centos 8 集群Linux环境搭建

    一.集群Linux环境搭建 1. 注意事项 1.1 windows系统确认所有的关于VmWare的服务都已经启动 打开任务管理器->服务,查看五个VM选项是否打开. 1.2 确认好VmWare生 ...

  4. Ngnix01

    Nginx(一)------简介与安装   目录 1.Nginx 的简介 2.Nginx 的常用功能 3.Nginx 安装 ①.下载地址 ②.Windows 版本安装 ③.Linux 版本安装 说到 ...

  5. 使用Socket通信(一)

    使用socket需要一个服务器,我用的是tomcat,好像AS不支持Tomcat了,还有什么好的服务器求推荐,使用Tomcat去官网下载,然后还要安装Java的jdk,然后配置jak环境变量,然后配置 ...

  6. 实用！8个 chrome插件玩转GitHub，单个文件下载小意思

    作为程序员对 GitHub 应该都不会陌生,我经常沉迷其中,找一些惊艳的项目或者工具.不过用的时间久了,发现它的用户体验实在是不敢恭维,有时候会让你做很多重复操作,浪费不少时间. 比如我想单独下载一个 ...

  7. php反序列化漏洞入门

    前言 这篇讲反序列化,可能不会很高深,我之前就被反序列化整懵逼了. 直到现在我对反序列化还是不够深入,今天就刚好可以研究研究. 0x01.反序列化漏洞介绍 序列化在内部没有漏洞,漏洞产生是应该程序在处 ...

  8. Luogu P2536 [AHOI2005]病毒检测

    题意 给一个有通配符的模式串和 \(n\) 个文本串,其中 ? 可以匹配任意字符,* 可以匹配 \(0\) 或任意多个字符,求 \(n\) 个文本串中无法与模式串匹配的数量. \(\texttt{Da ...

  9. Java学习的第六天

    1.今天学习了各种运算符, 还有选择结构,循环结构 2.今天学习没有遇到困难. 3.明天学习数组和第三章的开头一部分.

  10. frida打印与参数构造

    title: frida打印与参数构造 categories: 逆向与协议分析 toc: true mathjax: true tags: frida HOOK 逆向 widgets: type: t ...