JS实现div块的拖放，调换位置
主要是HTML5 的拖放（Drag 和 Drop）
例子（不需要对div设置ID）：
<!DOCTYPE HTML>
<html>
<head> <script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
} var srcdiv = null;
function drag(ev,divdom)
{
srcdiv=divdom;
ev.dataTransfer.setData("text/html",divdom.innerHTML);
} function drop(ev,divdom)
{
ev.preventDefault();
if(srcdiv != divdom){
srcdiv.innerHTML = divdom.innerHTML;
divdom.innerHTML=ev.dataTransfer.getData("text/html");
}
}
</script>
</head>
<body> <div style="width: 50px;height:50px;" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">
div1!
</div>
<div style="width: 50px;height:50px;" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">
div2!
</div>
<div style="width: 50px;height:50px;" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">
div3
</div> </body>
</html>
上面函数介绍：
- ondrop: 当放置被拖数据时，会发生 drop 事件，这里自定义drop(event,this)函数,互换两个的innerHTML
- ondragover:当拖动链接等有默认事件的元素时，要在ondragover事件中用ev.preventDefault()阻止默认事件。否则drop事件不会触发。
- draggable:允许拖动。
- ondragstart:规定当元素被拖动时，会发生什么。在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值。
-----请参考w3cschool：html5拖放
---------------------------------------------------------------------阿纪----------------------------------------------------------------------
JS实现div块的拖放，调换位置的更多相关文章
- js获取div相对屏幕的坐标位置
1:div相对屏幕的坐标位置 function getDivPosition(div){ var x = div.getBoundingClientRect().left; var y = div.g ...
- js控制div内的滚动条的位置
通过div的scrollTop变动控制垂直滚动条位置. 通过div的scrollLeft变动控制水平滚动条位置. 示例: <body> //d1是外层div,带滚动条 <div id ...
- 子div块中设置margin-top时影响父div块位置的解决办法
在css中设置样式时,通常会遇到用子div块margin中设置margin-top时,父div块中就会随着子div的margin-top,也会和子div执行相同的margin-top的位置样式 解决办 ...
- JS控制div跳转到指定的位置的几种解决方案总结
原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...
- js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标
原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...
- 子DIV块中设置margin-top时影响父DIV块位置的解决办法？
解决方法: 1.修改父元素的高度,增加padding-top样式模拟(padding-top:1px:常用) 2.为父元素添加overflow:hidden:样式即可(完美) 3.为父元素或者子元素声 ...
- 子div块中设置margin-top时影响父div块位置的解决办法及其原因
解决办法①: 若子DIV块中使用margin-top,则在父DIV块中添加:overflow:hidden; 解决办法②: 在子DIV块中用padding-top代替margin-top. 有个叫 b ...
- js控制div滚动条，滚动滚动条使div中的元素可见并居中
1.html代码如下 <div id="panel"> <div id="div1"></div> <div id=& ...
- Banner中利用Jquery隐藏显示下方DIV块
实现方式1: <!DOCTYPE html><html><head> <meta charset="UTF-8"> &l ...
随机推荐
- inferred 和 freefrom
“Inferred” is the default setting for storyboards and it means the scene will show a navigation bar ...
- java 实现视频转换通用工具类：视频截图-Ffmpeg（四）
java 实现视频转换通用工具类:获取视频元数据信息(一) java 实现视频转换通用工具类:视频相互转换-总方法及Mencoder(二) java 实现视频转换通用工具类:视频相互转换-Ffmpeg ...
- Ubuntu字体设置
Ubuntu所带的字体不是很好看,比较模糊,现修改为微软雅黑 Win7安装分区下的 \windows\fonts\文件夹下,复制msyh.ttf和msyhhd.ttf到/home/m/msfonts文 ...
- Windows下配置PHP支持LDAP扩展方法(wampserver)
在网上搜了好多文章都不行呢,大都是没有开启扩展的问题,可是我的是开启的. 终于看到一篇文章,因为我用的是wampserver.下面是文章原话: 然后你发现上面的提示依旧,因为这是网上大多能查到的资料的 ...
- Codeforces Round #323 (Div. 1) B. Once Again... 暴力
B. Once Again... Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/582/probl ...
- java 引用类型及作用
0. 引言 Java 中一共有 4 种类型的引用 : StrongReference. SoftReference. WeakReference 以及 PhantomReference , 这 4 种 ...
- careercup-C和C++ 13.5
13.5 谈谈C语言关键字”volatile”的意义(或重要性)? 解答 关键字volatile的作用是指示编译器,即使代码不对变量做任何改动,该变量的值仍可能被外界修改.操作系统.硬件或其他线程都可 ...
- PAT 1005
1005. Spell It Right (20) Given a non-negative integer N, your task is to compute the sum of all the ...
- QUiLoader 动态加载.ui文件
动态加载UI文件是指,用 Qt Designer 通过拖拽的方式生产.ui 文件.不用 uic工具把.ui 文件变成等价的 c++代码,而是在程序运行过程中需要用到UI文件时,用 QUiLoader ...
- Debian Linux下如何以root账号登录桌面
I Debian Linux 方法有两种,一是图形界面方式设置,一是命令行设置: A. 图形界面方式: GNOME桌面下:打开“系统主菜单“,选择”系统>系统管理>登录窗口”,在弹出的窗口 ...