<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Css/jquery-2.1.4.js"></script>
<script>
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function dragOver(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<style>
div {
width:200px;
height:100px;
border:1px solid #aaaaaa;
float:left;
margin:20px;
padding:10px;
}
figure {
clear:both;
}
</style>
</head>
<body>
<aside>
<h2>来回放置图片</h2>
<div id="div1"ondrop="drop(event)" ondragover="dragOver(event)"></div><div id="div2" ondrop="drop(event)" ondragover="dragOver(event)"></div>
<figure>
<figcaption>鲜花</figcaption>
<img id="image" src="Images/ct_html5_canvas_image.gif" alt="image" draggable="true" ondragstart="drag(event)"/>
</figure>
</aside>
</body>
</html>

HTML5拖放(drag和drog)作品的更多相关文章

  1. HTML5拖放(drag和drog)

    拖放(drag和drog)是HTML5的标准的组成部分,也是种常见的特性,意义为抓起一个元素放入到另外的一个位置,在HTML5中任何元素都可以被拖放,前题是要相关进行设置. 1.设置元素为可拖放,也就 ...

  2. HTML5 拖放---drag和drop

    拖放四步走:第一步:设置元素可拖放,即把 draggable属性设置为 true:  例:<div id="div" draggable="true"&g ...

  3. HTML5 之拖放(drag与drop)

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

  4. HTML5拖放（drag and drop）与plupload的懒人上传

    HTML5拖放能够将本地的文件拖放到页面上,plupload又是很好的文件上传插件,而今天就将两者结合,做了个文件拖拽上传的功能. 简述HTML5拖放 拖放是HTML5标准的一部分,任何元素都能够拖放 ...

  5. HTML5 拖放（Drag 和 Drop）功能开发——基础实战

    随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...

  6. html5支持drag的拖放排序插件sortable.js

    html5支持drag的拖放排序插件sortable.js <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.5.1/S ...

  7. HTML5 拖放

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

  8. HTML5 拖放及排序的简单实现

    HTML5 拖放及排序的简单实现 之前写过个类似的例子,看这里. 但想再深入一步,希望能通过拖放,来交换二个元素的位置.最好有应用到手机平台上. 作了个简单的例子,在手机上测试的时候不成功..查了好多 ...

  9. 【Demo】HTML5拖放--简单demo

    用HTML5拖放功能编写一个简单的拖放Demo 单次拖放demo 效果: ------拖放前------- ------拖放后-------  实现代码: <!DOCTYPE html> ...

随机推荐

  1. Ogre的mesh和skeleton文件数据格式分析

    转载自: http://www.cnblogs.com/topicofkevin/archive/2012/03/05/2380808.html 首先看一下skeleton文件,skeleton文件描 ...

  2. pytest入门学习(1)

    系统ubuntu 12.04 , 可上网 一.安装: 1.安装 setuptools 下载页面:https://bitbucket.org/pypa/setuptools/get/default.ta ...

  3. java快速排序代码

    public class test1 { public static int partition(int[] array,int lo,int hi){ int key=array[lo]; whil ...

  4. bzoj2806 [Apio2012]dispatching【可并堆】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2809 保存可并堆模版代码. #include <cstdio> #include ...

  5. hibernate Day2 笔记

    1.主键生成策略 <!--映射配置文件 >映射配置文件名称和位置没法有固定要求 >映射配置文件中的name属性值写实体类相关内容 -- class 标签name属性值实体类全路径 - ...

  6. 解决Centos下SSH登录慢的问题

    产生这个问题的原因是:server的sshd会去DNS查找访问client IP的hostname,如果DNS不可用或者没有相关的记录就会花费大量的时间. 1.在server上/etc/hosts文件 ...

  7. 086 Partition List 分隔链表

    给定一个链表和一个特定值 x,对链表进行分隔,使得所有小于 x 的节点都在大于或等于 x 的节点之前.你应当保留两个分区中每个节点的初始相对位置.例如,给定1->4->3->2-&g ...

  8. Less学习（2）（完结）

    七.模式匹配与Guard表达式 根据传入参数的不同,引入不同的属性集. .mixin (dark, @color) { color: darken(@color, 10%); } .mixin (li ...

  9. 将GitLab上面的代码克隆到本地

    1.安装GitLab客户端 2.去GitLab服务端找项目路径 3.去GitLab客户端去克隆代码 右键-->git Clone 4.最后结果

  10. android开发学习 ------- debug 和 release版本执行结果不同

    在debug上测试成功的,release上测试不成功,就想着怎么将 release 版本进行调试一下.还好 Android Studio 3.0是可以进行调试apk的 可以显示log,自己看自己的逻辑 ...