var dragged;    var f = document.getElementById(‘div3‘);    document.getElementById(‘draggable‘).addEventListener("dragstart", function( event ) {        // 保存被拖拉节点        dragged = event.target;        // 被拖拉节点的背景色变透明        event.target.style.opacity = 0.5;        // 兼容Firefox        event.dataTransfer.setData(‘text/plain‘, ‘anything‘);    }, false);    document.getElementById(‘draggable‘).addEventListener(‘dragend‘, function( event ) {        // 被拖拉节点的背景色恢复正常        event.target.style.opacity = ‘‘;    }, false);    f.addEventListener(‘dragover‘, function( event ) {        // 防止拖拉效果被重置，允许被拖拉的节点放入目标节点        event.preventDefault();    }, false);    f.addEventListener(‘dragenter‘, function( event ) {        // 目标节点的背景色变紫色        // 由于该事件会冒泡，所以要过滤节点        if ( event.target.className == ‘dropzone‘ ) {            event.target.style.background = ‘purple‘;        }    }, false);    f.addEventListener(‘dragleave‘, function( event ) {        // 目标节点的背景色恢复原样        if ( event.target.className == ‘dropzone‘ ) {            event.target.style.background = "";        }    }, false);    f.addEventListener(‘drop‘, function( event ) {        // 防止事件默认行为（比如某些Elment节点上可以打开链接）        event.preventDefault();        if ( event.target.className === ‘dropzone‘ ) {            // 恢复目标节点背景色            event.target.style.background = ‘‘;            // 将被拖拉节点插入目标节点            dragged.parentNode.removeChild( dragged );            event.target.appendChild( dragged );        }    }, false);

<div class="dropzone" id="div1">       <div id="draggable" draggable="true" style="background-color: yellow">      该节点可拖拉  </div></div><br/><br/><br/><div class="dropzone" id="div2"></div><br/><br/><br/><div class="dropzone" id="div3"></div><br/><br/><br/> <div class="dropzone" id="div4"></div>