html 5特集

ドラッグ&ドロップ
対応するドラッグ可能な要素に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')

カートを引っ張るケース:

    
    
    
    
    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'));

        }

    }
    



    

        

            ![](js  .jpg)
            
js      
            
80￥
        
        

            ![](css.jpg)
            
css    
            
60￥
        
        

            ![](node.jpg)
            
node    
            
78￥