ondrag

作者: Vincy_ivy | 来源:发表于2019-05-01 20:56 被阅读0次

    dragenter:当拖拽对象进入投放区时触发
    dragover:拖拽对象在投放区内移动时触发
    dragleave:拖拽对象没有投放到投放区,离开投放区时触发
    drop:拖拽对象投放在投放区时触发
    dragenter、dragover可能会受到默认事件的影响,所以我们在这两个事件中使用e.preventDefault();来阻止事件默认事件

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>点餐</title>
        <style>
            .area{width: 270px;height:310px;float:left;margin: 10px;}
            .customer{width:270px;height:360px; border:1px solid red;}
            .img{width:250px;height: 150px; margin: 10px;}
        </style>
        <script>
            window.onload=function(){
                var A=document.getElementById("A");
                var B=document.getElementById("B");
                var C=document.getElementById("C");
                var foodarea=document.getElementById("foodarea");
                var foods=document.getElementsByName("food");
                for(var i=0;i<foods.length;i++){
                    foods[i].ondragstart=function(e){
                        e.dataTransfer.setData("Text",e.target.id);
                    }
                    foods[i].ondragend=function(e){
                        e.dataTransfer.clearData("Text");
                    }
                
                A.ondragenter=function(e){
                    e.preventDefault();
                }
                A.ondragover=function(e){
                    e.preventDefault();
                }
                A.ondragleave=function(e){
                    e.preventDefault();
                }
                A.ondrop=function(e){
                    e.preventDefault();
                    var i=e.dataTransfer.getData("Text");
                    A.appendChild(document.getElementById(i));
                }
                B.ondragenter=function(e){
                    e.preventDefault();
                }
                B.ondragover=function(e){
                    e.preventDefault();
                }
                B.ondragleave=function(e){
                    e.preventDefault();
                }
                B.ondrop=function(e){
                    e.preventDefault();
                    var i=e.dataTransfer.getData("Text");
                    B.appendChild(document.getElementById(i));
                }
                C.ondragenter=function(e){
                    e.preventDefault();
                }
                C.ondragover=function(e){
                    e.preventDefault();
                }
                C.ondragleave=function(e){
                    e.preventDefault();
                }
                C.ondrop=function(e){
                    e.preventDefault();
                    var i=e.dataTransfer.getData("Text");
                    C.appendChild(document.getElementById(i));
                }
                        }
                var foodarea = document.getElementsByName("foodarea");
                for(var i=0;i<foodarea.length;i++){
                    foodarea[i].ondragenter=function(e){
                        e.preventDefault();
                    }
                    foodarea[i].ondragover=function(e){
                        e.preventDefault();
                    }
                    foodarea[i].ondragleave=function(e){
                        e.preventDefault();
                    }
                    foodarea[i].ondrop=function(e){
                        e.preventDefault();
                        var i=e.dataTransfer.getData("Text");
                        this.appendChild(document.getElementById(i));
                    }
                }
                
            }
        </script>
    </head>
    <body>
        <table align="center" height="900">
    
        <tr>
            <td><div class="area">
                <div align="center">顾客A</div>
                <div class="customer" id="A">放置区</div>
                </div>
            </td>
            
            <td><div class="area">
                <div align="center">顾客B</div>
                <div class="customer" id="B">放置区</div>
                </div>
            </td>
            <td>
                <div class="area">
                <div align="center">顾客C</div>
                <div class="customer" id="C">放置区</div>
                </div>
            </td>
        </tr>
        
        <tr>
            <td align="center" colspan="3">请选择一下菜品</td>
        </tr>
        
        <tbody>
        <tr>
            <td width="250" height="150" name="foodarea"><img src="img/dl1d.jpg" draggable="true" class="img" name="food" id="1"/></td>
            <td width="250" height="150" name="foodarea"><img src="img/dl2d.jpg" draggable="true" class="img" name="food" id="2"/></td>
            <td width="250" height="150" name="foodarea"><img src="img/dl3d.jpg" draggable="true" class="img" name="food" id="3"/></td>
        </tr>
        <tr>
            <td width="250" height="150" name="foodarea"><img src="img/js1.jpg" draggable="true" class="img" name="food" id="4"/></td>
            <td width="250" height="150" name="foodarea"><img src="img/js2.jpg" draggable="true" class="img" name="food" id="5"/></td>
            <td width="250" height="150" name="foodarea"><img src="img/js3.jpg" draggable="true" class="img" name="food" id="6"/></td>
        </tr>
        </tbody>
        
        </table>
        
        
        
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:ondrag

          本文链接:https://www.haomeiwen.com/subject/ytiwnqtx.html