JavaScript HTML DOM ondragenter 事件

  • ondragenter 事件

    当可拖动元素或文本选择进入有效放置目标时,会发生ondragenter事件。ondragenterondragleave事件可以帮助用户理解可拖动元素即将进入或离开放置目标。这可以通过,例如,当可拖动元素进入放置目标时设置背景颜色,以及当元素移出目标时移除颜色来完成。拖放是HTML5中非常常见的功能。当你“抓住”一个物体并将其拖到另一个位置时。有关更多信息,请参阅我们关于HTML5拖放的HTML教程。
    注意:要使元素可拖动,请使用全局HTML5 draggable属性。
    提示:默认情况下,链接和图像是可拖动的,不需要draggable属性。
    在拖放操作的不同阶段中,有许多事件被使用,并且可能会发生,在可拖动目标(源元素)上触发的事件:
    • ondragstart - 当用户开始拖动元素时发生
    • ondrag - 在拖动元素时发生
    • ondragend - 在用户完成拖动元素时发生
    在放置目标上触发的事件:
    • ondragenter - 当拖动的元素进入放置目标时发生
    • ondragover - 当拖动的元素位于放置目标上时发生
    • ondragleave - 当拖动的元素离开放置目标时发生
    • ondrop - 在拖放目标上放置拖动的元素时发生
    当可拖动元素进入放置目标时执行JavaScript:
    <div ondragenter="myFunction(event)"></div>
    
    尝试一下
  • 浏览器支持

    IE/Edge Chrome FireFox Safari Opera
    事件
    ondragenter
    9.0+
    4.0+
    3.5+
    6.0+
    12.0+
  • 语法

    在HTML中:
    <element ondrag="myScript">
    在JavaScript中:
    object.ondrag = function(){myScript};
    在JavaScript中,使用addEventListener()方法:
    object.addEventListener("dragenter", myScript);
    注意:在Internet Explorer 8和更早版本不支持使用addEventListener()方法。
  • 技术细节

    项目 描述
    冒泡:
    取消:
    事件类型: DragEvent
    支持的HTML标记: 所有HTML标记
    DOM版本 DOM Event Level 3
  • 更多例子

    演示所有可能的拖放事件:
    <p draggable="true" id="dragtarget">拖动我!</p>
    
    <div class="droptarget">放在这!</div>
    
    <script>
    /* ----------------- 在拖动目标上触发的事件 ----------------- */
    
    document.addEventListener("dragstart", function(event) {
      //dataTransfer.setData()方法设置数据类型和拖动数据的值
      event.dataTransfer.setData("Text", event.target.id);
    
      // 开始拖动p元素时输出一些文本
      document.getElementById("demo").innerHTML = "Started to drag the p element.";
    
      // Change the opacity of the draggable element
      event.target.style.opacity = "0.4";
    });
    
    // 拖动p元素时,更改输出文本的颜色
    document.addEventListener("drag", function(event) {
      document.getElementById("demo").style.color = "red";
    });
    
    // 完成拖动p元素后输出一些文本并重置不透明度
    document.addEventListener("dragend", function(event) {
      document.getElementById("demo").innerHTML = "Finished dragging the p element.";
      event.target.style.opacity = "1";
    });
    
    
    /* ----------------- 在放置目标上触发的事件 ----------------- */
    
    //当可拖动的p元素进入droptarget时,更改DIVS的边框样式
    document.addEventListener("dragenter", function(event) {
      if ( event.target.className == "droptarget" ) {
        event.target.style.border = "3px dotted red";
      }
    });
    
    // 默认情况下,不能在其他元素中删除数据/元素。 要允许删除,我们必须阻止元素的默认处理
    document.addEventListener("dragover", function(event) {
      event.preventDefault();
    });
    
    // 当可拖动的p元素离开droptarget时,重置DIVS的边框样式
    document.addEventListener("dragleave", function(event) {
      if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
      }
    });
    
    /* 在drop  - 防止浏览器默认处理数据(默认为打开时链接打开)
    重置输出文本的颜色和DIV的边框颜色
    使用dataTransfer.getData()方法获取拖动的数据
    拖动的数据是拖动元素的id(“drag1”)
    将拖动的元素追加到drop元素中
    */
    document.addEventListener("drop", function(event) {
      event.preventDefault();
      if ( event.target.className == "droptarget" ) {
        document.getElementById("demo").style.color = "";
        event.target.style.border = "";
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
      }
    });
    </script>
    尝试一下
  • 相关页面