HTML拖放的一个实例

最新推荐文章于 2021-11-30 16:53:18 发布

原创最新推荐文章于 2021-11-30 16:53:18 发布 · 209 阅读

0 ·

CC 4.0 BY-SA版权

HTML 同时被 2 个专栏收录

9 篇文章

订阅专栏

JavaScript

6 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>drag</title>
    <style>
        #list li{
            border:1px solid #000;
            width:100px;
            height:20px;
            background-color:yellow;
            margin-bottom:10px;
            list-style:none;
            text-align:center;
        }
        #mark{
            width:200px;
            height:200px;
            border:1px solid #000;
            background-color:red;
            margin-left:300px;
            margin-top:300px;
        }
    </style>
</head>
<body>
    <ul id="list">
        <li draggable="true">A</li>
        <li draggable="true">B</li>
        <li draggable="true">C</li>
        <li draggable="true">D</li>
    </ul>
    <div id="mark">

    </div>
    <script>
        window.onload=function(){
            var oUl=document.getElementById('list');
            var oLi=oUl.getElementsByTagName('li');
            var oMark=document.getElementById('mark');
            var liLen=oLi.length;
            for(var i=0; i<liLen; i++){
                oLi[i].ondragstart=function(ev){
                    var ev=window.event||ev;
                    ev.dataTransfer.setData('name','1');
                    ev.dataTransfer.effectAllowed='link';
                    ev.dataTransfer.setDragImage(oMark,0,0);
                    this.style.backgroundColor="green";
                }
                oLi[i].ondrag=function(){
                    //this.style.backgroundColor="red";
                }
                oLi[i].ondragend=function(){
                    this.style.backgroundColor="yellow";
                }
            }
            oMark.ondragenter=function(ev){
                var ev=window.event||ev;
                this.style.backgroundColor="green";
            }
            oMark.ondragover=function(ev){
                var ev=window.event||ev;
                ev.preventDefault();
                this.style.backgroundColor="pink";
            }
            oMark.ondragleave=function(){
                this.style.backgroundColor="orange";
            }
            oMark.ondrop=function(ev){
                this.style.backgroundColor="black";
                if(ev.dataTransfer.types=="name"){
                    alert(true);
                }
            }

        }
    </script>
</body>
</html>