html5专题

拖拽

在相应的可拖拽元素上设置 draggable=‘true’
事件：
可拖动元素
1、dragstart:开始拖拽
2、drag：拖拽过程中
3、dragend：拖拽结束
拖拽的接受目标区域
1、dragenter：进入目标区域
2、dragover：在目标区域中
3、dragleave：离开目标区域
4、dragdrop：在目标区域中松开（需要早dragover事件中阻止默认事件）

传送和接收数据：

event.dataTransfer.setdata('text',this.index)
event.dataTransfer.getdata('text')

拖拽购物车案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    ul:after {
        display: block;
        content: '';
        clear: both;
    }

    li {
        list-style: none;
        float: left;
        width: 200px;
        border: 1px solid #000;
        margin: 10px;
    }

    li img {
        width: 200px;
    }

    p {
        border-bottom: 1px dashed #000;
    }

    #div1 {
        width: 600px;
        height: 300px;
        border: 1px #000 solid;
    }

    .box1 {
        float: left;
        width: 200px;
    }

    .box2 {
        float: left;
        width: 200px;
    }

    .box3 {
        float: left;
        width: 200px;
    }

    #allMoney {
        float: right;
    }
    </style>
    <script>
    window.onload = function() {
        var oLi = document.getElementsByTagName('li');
        var oDiv = document.getElementById('div1');
        var obj = {};
        var iNum = 0;
        var allMoney = null;
        for (var i = 0; i < oLi.length; i++) {
            oLi[i].ondragstart = function(ev) {
                var aP = this.getElementsByTagName('p')
                ev.dataTransfer.setData('title', aP[0].innerHTML)
                ev.dataTransfer.setData('money', aP[1].innerHTML)
                //ev.dataTransfer.setDragImage(this,0,0);
            }
        }

        oDiv.ondragover = function(ev) {
            ev.preventDefault();

        }
        oDiv.ondrop = function(ev) {
            ev.preventDefault();
            var sTitle = ev.dataTransfer.getData('title');
            var sMoney = ev.dataTransfer.getData('money');
            if (!obj[sTitle]) {
                oDiv.innerHTML = oDiv.innerHTML + `
                <p>
                    <span class="box1">1</span>
                    <span class="box2">${sTitle}</span>
                    <span class="box3">${sMoney}</span>
              </p>

            `
                obj[sTitle] = 1;
            } else {
                var box1 = document.getElementsByClassName('box1');
                var box2 = document.getElementsByClassName('box2');
                for (var i = 0; i < box2.length; i++) {
                    if (box2[i].innerHTML == sTitle) {
                        box1[i].innerHTML = parseInt(box1[i].innerHTML) + 1;
                    }
                }
            }

            iNum += parseInt(sMoney);
            console.log(iNum);
            if (!allMoney) {
                oDiv.innerHTML = oDiv.innerHTML + `<div id="allMoney">${iNum}￥</div>`
                allMoney = 1;
            }
            document.getElementById('allMoney').innerHTML = iNum + '￥';
            oDiv.appendChild(document.getElementById('allMoney'));

        }

    }
    </script>
</head>

<body>
    <ul>
        <li draggable='true'>
            ![](js高程.jpg)
            <p>js高级程序设计</p>
            <p>80￥</p>
        </li>
        <li draggable='true'>
            ![](css.jpg)
            <p>css技术指南</p>
            <p>60￥</p>
        </li>
        <li draggable='true'>
            ![](node.jpg)
            <p>node深入学习</p>
            <p>78￥</p>
        </li>
    </ul>
    <div id="div1">
    </div>
</body>

</html>

html5专题

拖拽

推荐阅读更多精彩内容