HQ-Dev
2/28/2017 - 6:22 AM

可移动且可替换div---html

div---html
content_copyfile_download
<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        #div1, #div2, #div3
        {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <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 id="div1" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">
    <p>ni hao!</p>
</div>
<div id="div2" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">
    <p>Hello world!</p>
</div>
<div id="div3" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="false" ondragstart="drag(event, this)">
    <p>豪生!</p>
</div>

</body>
</html>