js玩转多个div互换

来源：互联网发布：谭浩强c语言电子书pdf 编辑：程序博客网时间：2024/06/05 10:04

开胃菜

这里写图片描述

代码是这样滴

<!DOCTYPE HTML><html><head>    <style type="text/css">        .divClass {            float: left;            width: 100px;            height: 35px;            margin: 10px;            padding: 10px;            border: 1px solid #aaaaaa;        }    </style></head><body><div class="divClass" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true"     ondragstart="drag(event, this)">    <p>Ali</p></div><div class="divClass" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true"     ondragstart="drag(event, this)">    <p>Tencent</p></div><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></body></html>

简单解释下函数

ondrop: 拖到目的地放下之后要做的处理，这里自定义drop(event,this)函数,互换两个的innerHTML
ondragover:当拖动链接等有默认事件的元素时，要在ondragover事件中用ev.preventDefault()阻止默认事件。否则drop事件不会触发。
draggable:允许拖动
ondragstart:选取拖动目标要做的处理，这里保存拖动目标的innerHTML.

阅读全文

0 0