HTML5的拖放功能-CFANZ编程社区

HTML5的拖放功能
<!DOCTYPE html>            
<html>            
<head>            
    <meta charset="UTF-8">            
    <title>H5拖放</title>         
    <style type="text/css">
        body{font-size:84%;}
        .dustbin{width:100px; height:260px; line-height:1.4; background-color:gray; font-size:36px; font-family:"微软雅黑", "Yahei Mono"; text-align:center; text-shadow:-1px -1px #bbb; float:left;}
        .dragbox{width:500px; padding-left:20px; float:left;}
        .draglist{padding:10px; margin-bottom:5px; border:2px dashed #ccc; background-color:#eee; cursor:move;}
        .draglist:hover{border-color:#cad5eb; background-color:#f0f3f9;}
        .dragremind{padding-top:2em; clear:both;}    
    </style>
</head>            
<body>    
    <div class="dustbin"><br />垃<br />圾<br />箱</div>
    <div class="dragbox">
        <div class="draglist" title="拖拽我" draggable="true">垃圾</div>
    </div>
    <div class="dragremind"></div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script type="text/javascript">  
        var eleDustbin = $(".dustbin")[0], eleDrags = $(".draglist")[0], eleRemind = $(".dragremind")[0], eleDrag = null;
        eleDrags.onselectstart = function() {
            return false;
        };
        eleDrags.ondragstart = function(ev) {
            /*拖拽开始*/
            //拖拽效果
            ev.dataTransfer.effectAllowed = "move";
            ev.dataTransfer.setData("text", ev.target.innerHTML);
            ev.dataTransfer.setDragImage(ev.target, 0, 0);
            eleDrag = ev.target;
            return true;
        };
        eleDrags.ondragend = function(ev) {
            /*拖拽结束*/
            ev.dataTransfer.clearData("text");
            eleDrag = null;
            return false
        };
        eleDustbin.ondragover = function(ev) {
            /*拖拽元素在目标元素头上移动的时候*/
            ev.preventDefault();
            return true;
        };

        eleDustbin.ondragenter = function(ev) {
            /*拖拽元素进入目标元素头上的时候*/
            this.style.color = "#ffffff";
            return true;
        };
        eleDustbin.ondrop = function(ev) {
            /*拖拽元素进入目标元素头上，同时鼠标松开的时候*/
            if (eleDrag) {
                eleRemind.innerHTML = '<strong>"' + eleDrag.innerHTML + '"</strong>被扔进了垃圾箱';
                eleDrag.parentNode.removeChild(eleDrag);
            }
            this.style.color = "#000000";
            return false;
        };     
    </script>  
</body>            
</html>
0 条评论