<!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. 多线程Demo1 了解

      首先演示一下主线程的阻塞   //  DYFViewController.m //  623-01-阻塞多线程 // //  Created by dyf on 14-6-23. //  Copy ...

  2. php7+新特性

    php7已经发布有段时间了,查了下正式版本的发布时间是2015年底,至于具体的新特性,在这里总结一下. 标量类型声明 php7新增了4种类型, 字符串(string), 整数 (int), 浮点数 ( ...

  3. spring boot 配置https 报这个错误：java.lang.IllegalArgumentException: Private key must be accompanied by certificate chain

    找了接近半天的时间,原来是那么小的问题 server.ssl.key-store=test.jksserver.ssl.key-store-password=123456server.ssl.key- ...

  4. Codeforces Round #390 (Div. 2) A

    One spring day on his way to university Lesha found an array A. Lesha likes to split arrays into sev ...

  5. c 语言写的高级Oracle®数据库调优及监控工具

    http://www.lab128.com.cn/lab128_why.html ###另外一款ORALCE Monitor tool freee https://www.myorasql.com/ ...

  6. 转 SecureCRT中文乱码解决方法

    1. 打开对话窗口,在工具栏中点开“选项”,选择“会话选项”.  2. 在打开的“会话选项”中,选择“外观”.  3. 在显示的“窗口和文本外观”中找到“字符编码”.  4. 把“字符编码”设置为“U ...

  7. object-position和object-fit

    今天在用video标签时发现改变video的宽和高,它里面播放内容由于比例的限制无法充满我设置的宽高,这时要是有类似background-size属性该是多好.网上一查果然找到了css3中的objec ...

  8. Aop第一节

    什么是AOP AOP(Aspect-OrientedProgramming,面向方面编程),可以说是OOP(Object-Oriented Programing,面向对象编程)的补充和完善.OOP引入 ...

  9. office 导出问题

    就用程序池右击项目高级设置 应用程序池的项目中的标识改为 LocalSystem 启用32位应用程序设为true或false

  10. equals方法那些事

    1.Equals 很多人对equals方法的用法有些模糊,这里来为大家梳理下: 字符串中的equals方法,该方法用来判断两个字符串的内容是否相同. 例1: String str1="Hel ...