HTML5:一个拖拽网页元素的例子
关键字:HTML5, Drag&Drop, JavaScript, CSS
运行环境:Chrome
<!DOCTYPE html>
<html>
<head>
<title>example</title> <style type="text/css">
.main-area {
margin-left: 10%;
margin-right: 10%;
min-width: 600px;
} ul {
padding-left: 0;
text-align:center;
} li {
word-break: break-all;
display: inline-block;
width: 400px;
height: 200px;
margin: 3px;
border-radius: 3px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
}
</style>
</head>
<body>
<script>
// on source element
function dragstart (ev) {
ev.dataTransfer.effectAllowed = "move";
ev.dataTransfer.setData("srcId", ev.currentTarget.id);
ev.dataTransfer.setDragImage(ev.currentTarget, 0, 0);
}
function dragend(ev) {
ev.dataTransfer.clearData("srcId");
} // on target element
function dragover(ev) {
ev.preventDefault();
}
function drop(ev) {
var srcId = ev.dataTransfer.getData("srcId");
var srcObj = document.getElementById(srcId);
if(srcObj != ev.currentTarget){
var list = document.getElementById('list');
list.insertBefore(srcObj, ev.currentTarget);
}
}
</script>
<div id='main-area'>
<ul id='list'>
<li id='1' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)">
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
</li><li id='2' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)">
222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
</li><li id='3' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)">
333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333
</li><li id='4' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)">
444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444
</li>
</ul>
</div>
</body>
</html>
注:如果每个li之间换行,将会有空格产生。参考问题:http://stackoverflow.com/questions/25520904/html5-reorder-the-children-li-of-ul-by-drag-and-drop-the-borders-between-li-el
HTML5:一个拖拽网页元素的例子的更多相关文章
- html5 文件拖拽上传
本文首先发表在 码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...
- HTML5之拖拽(兼容IE和非IE)
前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实 ...
- JavaScript动画-拖拽改变元素大小
▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...
- 开源自己写的一个拖拽库,兼容到IE8+
github地址:https://github.com/qiangzi7723/draggable 目前这个库的兼容做到了兼容IE8,所以如果需要兼容IE8的朋友不妨试试.库里面写了很多的注释,对于想 ...
- selenium学习-拖拽页面元素
一.ActionChains包 模拟鼠标的操作要首先引入ActionChains的包 from selenium.webdriver.common.action_chains import Actio ...
- javascript动画系列第四篇——拖拽改变元素大小
× 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...
- jquery插件之拖拽改变元素大小
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...
- 基于html5可拖拽图片循环滚动切换
分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="s ...
- 分享html5的一个拖拽手法
就是这样的效果:拖拽之前 之后: 上代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
随机推荐
- iOS 使用CLGeocoder获取地理位置
placemark(MKPlacemark类的对象)其实是geocoder(MKReverseGeocoder类的对象)的一个属性.从geocoder里面取placemark这个和直接取placema ...
- python版的短信轰炸机smsbomb----------下篇(get)
在上一篇介绍的是post方式发送数据,可是有点站点是get方式发送数据,比如:http://www.oupeng.com/download,事实上方法差点儿相同. import httplib,url ...
- careercup-树与图 4.8
4.8 你有两棵非常大的二叉树:T1,有几百万个结点:T2,有几百个结点.设计一个算法,判断T2是否为T1的子树. 如果T1有这么一个结点n,其子树与T2一模一样,则T2C++实现代码: #inclu ...
- 系统数据文件和信息之附加组ID
4.2BSD引入了附加组ID(supplementary group ID)的概念.我们不仅可以属于口令文件记录项中组ID所对应的组,也可属于多达16个另外的组.文件访问权限检查相应被修改为:不仅将进 ...
- linux上配置jdk+Apache
一:安装jdk下载将jdk加压后放到/usr/local目录下: [root@master ~]#chmod 755 jdk-6u5-linux-x64.bin [root@master ~]# ./ ...
- hdu1047(Java)大数相加
题目大意:输入n组数据,每组数据中又有若干长度不大于100的整数,以0结束每组数据的输入,求每组中数据之和.每两组数据输入之间有一行空格,输出也是如此. Integer Inquiry Time Li ...
- Android5.0常用颜色属性说明
在使用Eclipse的时代,我们很少去在style文件给整个应用或者Activity去设定颜色,那是因为即使设置也不会提升用户的视觉效果.但是材料设计号称让没有设计功底的人也能做出漂亮的App,那我们 ...
- javascript进击(五)JS对象
JavaScript中是所有事物都是对象.JavaScript允许自定义对象. 对象是带有属性和方法的特殊数据类型. 访问对象的属性: 常见属性 访问对象的方法: 常用方法 (创建JavaScript ...
- photoshop 常用快捷键大全
一.文件新建 CTRL+N打开 CTRL+O 打开为 ALT+CTRL+O关闭 CTRL+W保存 CTRL+S 另存为 CTRL+SHIFT+S另存为网页格式 CTRL+ALT+S打印设置 CTRL+ ...
- 深入分析 Java 中的中文编码问题 (文章来自网络)
许令波,developerWorks 中国网站最佳作者,现就职于淘宝网,是一名 Java 开发工程师.对大型互联网架构设计颇感兴趣,喜欢钻研开源框架的设计原理.有时间将学到的知识整理成文章,也喜欢记录 ...