主要是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>

上面函数介绍：

  1. ondrop: 当放置被拖数据时，会发生 drop 事件，这里自定义drop(event,this)函数,互换两个的innerHTML
  2. ondragover:当拖动链接等有默认事件的元素时，要在ondragover事件中用ev.preventDefault()阻止默认事件。否则drop事件不会触发。
  3. draggable:允许拖动。
  4. ondragstart:规定当元素被拖动时，会发生什么。在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值。

-----请参考w3cschool：html5拖放

---------------------------------------------------------------------阿纪----------------------------------------------------------------------

JS实现div块的拖放，调换位置的更多相关文章

  1. js获取div相对屏幕的坐标位置

    1:div相对屏幕的坐标位置 function getDivPosition(div){ var x = div.getBoundingClientRect().left; var y = div.g ...

  2. js控制div内的滚动条的位置

    通过div的scrollTop变动控制垂直滚动条位置. 通过div的scrollLeft变动控制水平滚动条位置. 示例: <body> //d1是外层div,带滚动条 <div id ...

  3. 子div块中设置margin-top时影响父div块位置的解决办法

    在css中设置样式时,通常会遇到用子div块margin中设置margin-top时,父div块中就会随着子div的margin-top,也会和子div执行相同的margin-top的位置样式 解决办 ...

  4. JS控制div跳转到指定的位置的几种解决方案总结

    原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...

  5. js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  6. 子DIV块中设置margin-top时影响父DIV块位置的解决办法？

    解决方法: 1.修改父元素的高度,增加padding-top样式模拟(padding-top:1px:常用) 2.为父元素添加overflow:hidden:样式即可(完美) 3.为父元素或者子元素声 ...

  7. 子div块中设置margin-top时影响父div块位置的解决办法及其原因

    解决办法①: 若子DIV块中使用margin-top,则在父DIV块中添加:overflow:hidden; 解决办法②: 在子DIV块中用padding-top代替margin-top. 有个叫 b ...

  8. js控制div滚动条，滚动滚动条使div中的元素可见并居中

    1.html代码如下 <div id="panel"> <div id="div1"></div> <div id=& ...

  9. Banner中利用Jquery隐藏显示下方DIV块

    实现方式1: <!DOCTYPE html><html><head>    <meta charset="UTF-8">    &l ...

随机推荐

  1. Java中3DES加密解密与其他语言(如C/C++)通信

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  2. 【M19】了解临时对象的来源

    1.首先,确认什么是临时对象.在swap方法中,建立一个对象temp,程序员往往把temp称为临时对象.实际上,temp是个局部对象.C++中所谓的临时对象是不可见的,产生一个non-heap对象,并 ...

  3. HDU 5500 Reorder the Books 贪心

    Reorder the Books Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php? ...

  4. Codeforces Round #200 (Div. 1)A. Rational Resistance 数学

    A. Rational Resistance Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/343 ...

  5. cocos2d-x3.1.1 step by step 学习笔记1----- 软件的安装与HelloWord

    1:软件安装 系统:WIn7 软件:VS2012.cocosd-x3.1.1.python2.6.7.doxygen <1>首先安装VS2012,安装也是傻瓜式安装, <2>然 ...

  6. JFinal使用笔记1-部署demo项目到本地tomcat

    http://my.oschina.net/u/173975/blog/110261 尝试用JFinal开发个开源的社团管理系统,把开发过程中遇到的问题和解决办法记下来,以供参考. 部署jfinal_ ...

  7. SAP-SD-ABAP-VMOD 查找和应用SD模块用户出口(user exit) 好方法 .

    针对 SD 模块,有一个专门管理 user-exit 的开发包  VMOD , 只要用tcode: se80 查看它, 会发现绝大部分的 SD 要相关的 user-exit 都能在这找到.

  8. C#_delegate - Pair<T> & 简单顺序逆序 & 方法委托（在Pair类下）&枚举类型 混搭使用

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  9. axel源码学习(1)——重要流程细节

    前面一篇文章的流程太过于简单,基本没有触及到axel的核心,因此本文将要把axel中的几个重要的主要的操作流程单独弄出来看看,还是按照main函数的执行顺序来展开,略去错误处理之类的流程仅仅着眼于最重 ...

  10. opencv拼接相关1

    这里面都是一些比较杂的东西,没什么实际意义.主要是为了,后面能跑一个程序: Stitcher: 抠细节: http://docs.opencv.org/2.4.2/modules/stitching/ ...