拖拽

時間  2019-11-15
原文   原文鏈接 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding:0;}
        body{padding-top: 20px;}
        .head li{float: left;list-style: none;margin-left: 15px;}
        .head{overflow: auto;zoom: 1;}
        #dri{width: 100px;height: 20px;margin-left: 15px}
        .edit .editBtn{margin-right: 20px;width: 240px;height: 30px;box-sizing: border-box;float: left}
        .edit .editBtn button{margin-left: 10px;width: 70px;height: 30px;box-sizing: border-box;float: left}
        /*.showWays{float: left;}*/
        .showWays{width:330px;height: 30px;box-sizing: border-box;float: left}
        .showWays select{display: block;width: 100px;height: 30px;float: left;margin-left: 10px;}
        /*.showWays select option{display: block;width: 100px;height: 30px;}*/
        .editArea{width: 900px;height: 500px;border: 1px solid red;box-sizing: border-box;margin:30px;float: left;background-color: #e2d8d8 }
        .editArea .content{width: 850px;height: 450px;margin-top: 25px;margin-left: 25px;border: 1px solid red;background-color: white;}
        .label{margin-top: 30px;margin-left: 1000px;}
        .label dt{font-weight: bold}
        .label:after{content: "";width: 0;height: 0;visibility: hidden;clear: both;}
    </style>
</head>
<body>
<div class="head">
    <ul>
        <li>開料優化</li>
        <li>加工參數</li>
        <li>標籤模板</li>
        <li>材料庫</li>
        <li>標準件</li>
        <li>全局參數</li>
    </ul>
</div>
<div>
    <select id="dri">
        <option value="">80*60 豎</option>
    </select>
</div>
<div>
    <div class="edit">
        <div class="editBtn">
            <button>左對齊</button>
            <button>右對齊</button>
            <button>左右居中</button>
        </div>
        <div class="showWays">
            <select name="" id="qr">
                <option value="">二維碼</option>
            </select>
            <select name="" id="typeface">
                <option value="">微軟雅黑</option>
            </select>
            <select name="" id="fontsize">
                <option value="">12</option>
            </select>
        </div>
        <button style="float: left;margin-left: 10px">保存設置</button>
    </div>
    <div class="editArea">
        <div class="content"></div>
    </div>
    <div class="label">
        <dl>
            <dt>標籤域</dt>
            <dd draggable="true" id="serialNumber">編號</dd>
            <dd draggable="true" id="encoded">編碼</dd>
            <dd draggable="true" id="boardName">板件名稱</dd>
            <dd draggable="true" id="material">基材</dd>
            <dd draggable="true" id="orderDate">訂單日期</dd>
            <dd draggable="true" id="orderNumber">訂單編號</dd>
            <dd draggable="true" id="clientName">客戶名稱</dd>
            <dd draggable="true" id="productName">產品名稱</dd>
            <dd draggable="true" id="lwh">長*寬*高</dd>
            <dd draggable="true" id="frontBarCode">正面條碼</dd>
            <dd draggable="true" id="reverseBarCode">反面條碼</dd>
            <dd draggable="true" id="rotate">旋轉</dd>
            <dd draggable="true" id="edgeBandingLen1">封邊長1</dd>
            <dd draggable="true" id="edgeBandingLen2">封邊長2</dd>
            <dd draggable="true" id="edgeBandingWidth1">封邊寬1</dd>
            <dd draggable="true" id="edgeBandingWidth2">封邊寬2</dd>
            <dd draggable="true" id="remark1">備註1</dd>
            <dd draggable="true" id="remark2">備註2</dd>
        </dl>
    </div>
</div>
</body>
<script>
    window.onload=function () {
        //獲取被拖動的元素
        var eleDrag;
        var dd=document.getElementsByClassName('label')[0].getElementsByTagName('dd');
        console.log(dd)
        var drop=document.getElementsByClassName('content')[0];
        for(var i=0;i<dd.length;i++ ){
            dd[i].ondragstart=function (ev) {
                ev.dataTransfer.effectAllowed = "move";
                ev.dataTransfer.setData("labelID", this.id);
                eleDrag = ev.target;
            }
            dd[i].ondragend = function(ev) {
                //拖拽結束
                ev.dataTransfer.clearData("labelID");
                eleDrag = null;
                return false
            };
        }
        drop.ondragenter = function(){ //源對象進入目標對象
            console.log('drag enter');
            //drop.style.opacity = "1"; //將透明度變成1
        }
        drop.ondragleave= function(){  //源對象離開目標對象後
            console.log('drag leave');
            //drop.style.opacity = ".2"; //將透明度變爲0.2
        }
        //這個比較容易掉，致使drop事件沒法觸發
        drop.ondragover= function(e){  //源對象在懸停在目標對象上時
            e.preventDefault();  //阻止默認行爲，使得drop能夠觸發
        }
        drop.ondrop= function(e){ //源對象鬆手釋放在了目標對象中
            console.log('drop');
            //drop.style.opacity = ".2"; //將透明度變爲0.2
            var id = e.dataTransfer.getData('labelID');//獲得數據--id值
            drop.innerText=id;
        }
    }
</script>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程