拖拉事件

Posted 2020-08-20 没离开过

   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>

dragover事件：拖拉到当前节点上方时，在当前节点上持续触发，该事件的target属性是当前节点。该事件与dragenter事件基本类似，默认会重置当前的拖拉事件的效果（DataTransfer对象的dropEffect属性）为none，即不允许放下被拖拉的节点，所以如果允许在当前节点drop数据，通常会使用preventDefault方法，取消重置拖拉效果为none。

 

 

原文链接：http://javascript.ruanyifeng.com/dom/event-type.html