<!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. lightoj 1035【暴力】

    思路: 预处理一下素数数组,然后暴力计算就好了. 类似处理素数因子: #include <cstdio> #include <iostream> #include <st ...

  2. HDOJ1874最短路【spfa】

    //不知道切过这道题目几次了,这次又wa了...双向路啊....这波简直无奈了,今晚又是浪成狗!!!! #include<cstdio> #include<vector> #i ...

  3. 在win下启动memcached

    memcached -m 64 -p 11211 -vvv 设置默认内存64,默认端口11211 ,输出功能及警告错误等信息

  4. Android开发实践：掌握Camera的预览方向和拍照方向

    http://ticktick.blog.51cto.com/823160/1592267?utm_source=tuicool&utm_medium=referral Android的Cam ...

  5. [Xcode 实际操作]八、网络与多线程-(9)使用异步Get方式获取网页源码

    目录:[Swift]Xcode实际操作 本文将演示如何通过Get请求方式,异步获取网页源码. 异步请求与同步请求相比,不会阻塞程序的主线程,而会建立一个新的线程. 在项目导航区,打开视图控制器的代码文 ...

  6. 【BZOJ1174】: [Balkan2007]Toponyms

    →原题← ↑这样子我就不复制题面啦~ 就是一题很裸的字典树而已,不过空间卡的很死,直接开个数组 tr[N][52] 什么之类的一定会RE的(惨痛的教训) 当字典树空间不够而时间限制又比较宽松时,我们可 ...

  7. Luogu P1514引水入城【搜索】 By cellur925

    题目传送门 这道题开始看好像并没有什么思路,和搜索好像也并没有什么关系.但是我们手玩下样例就会发现,思路其实就三句话:(写这道题的时候在代码里写的) //我们想知道从第1行的每列往下到干旱区的范围 / ...

  8. SQL基础培训实战教程[全套]

    学习简介:林枫山根据网上搜索资料进行参考,编写制作的SQL Server实操学习教程,欢迎下载学习. 下载链接目录如下: 进度0-SQL基础语法    下载学习文档 进度1-建数据表-美化版-2018 ...

  9. Nginx 405 not allowed最简单快速解决办法

    Apache.IIS.Nginx等绝大多数web服务器,都不允许静态文件响应POST请求,否则会返回“HTTP/1.1 405 Method not allowed”错误. server { list ...

  10. hdu 6319 Problem A. Ascending Rating （2018 Multi-University Training Contest 3）

    #include <stdio.h> #include <iostream> #include <cstdlib> #include <cmath> # ...