HTML | Evento DOM ondragover

El evento HTML DOM ondragover ocurre cuando un elemento que se puede arrastrar se arrastra sobre una zona de colocación válida.

Nota: Los enlaces y las imágenes se pueden arrastrar de forma predeterminada.

Hay algunos eventos que se usan y ocurren en las diferentes etapas de una operación de arrastrar y soltar:

    Eventos activados en el objetivo arrastrable:

  • ondragstart : ocurre cuando se inicia el arrastre de un elemento.
  • ondrag : ocurre mientras se arrastra un elemento.
  • ondragend : ocurre cuando finaliza el arrastre de un elemento.
    Eventos activados en el destino de colocación:

  • ondragenter : se produce cuando el elemento arrastrado entró en el destino de colocación.
  • ondragover : ocurre cuando el elemento arrastrado está sobre el destino de colocación.
  • ondragleave : ocurre cuando el elemento arrastrado sale del destino de colocación.
  • ondrop : ocurre cuando el elemento arrastrado se suelta en el destino de colocación.

Nota: el evento ondragover se activa cada 350 milisegundos mientras se arrastra un elemento.

Sintaxis:

  • En HTML:
    <element ondragover="myScript">
  • En JavaScript:
    object.ondragover = function(){myScript};
  • En JavaScript, usando el método addEventListener():
    object.addEventListener("dragover", myScript);

Ejemplo: Uso de HTML.

<!DOCTYPE HTML>
<html>
  
<head>
    <style>
        #droptarget {
            float: center;
            width: 300px;
            height: 50px;
            margin: 20px;
            margin-top: 30px;
            padding: 5px;
            border: 6px solid green;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <h2>
          HTML DOM ondragover Event
      </h2>
        <p ondragstart="dragStartEle(event)" 
           draggable="true" 
           id="dragtarget">
          Draggable element
      </p>
        
        <div id="droptarget" 
             ondrop="dropEle(event)" 
             ondragover="allowDropEle(event)">
        </div>
  
        <p id="try"></p>
  
        <script>
            function dragStartEle(event) {
                event.dataTransfer.setData(
                  "Text", event.target.id);
            }
  
            function allowDropEle(event) {
                event.preventDefault();
                document.getElementById(
                  "try").innerHTML = 
                  "Element is over the dropzone";
                event.target.style.border = "6px dotted green";
            }
  
            function dropEle(event) {
                event.preventDefault();
                var data = 
                    event.dataTransfer.getData("Text");
                
                event.target.appendChild(
                  document.getElementById(data));
                
                document.getElementById(
                  "try").innerHTML = "Dragging finished";
            }
        </script>
    </center>
</body>
  
</html>

Producción:

Ejemplo: uso de JavaScript

<!DOCTYPE HTML>
<html>
  
<head>
    <style>
        #droptarget {
            float: center;
            width: 300px;
            height: 50px;
            margin: 20px;
            margin-top: 30px;
            padding: 5px;
            border: 6px solid green;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <h2>HTML DOM ondragover Event</h2>
        <p draggable="true" 
           id="dragtarget">
          Draggable element
      </p>
  
        <div id="droptarget"></div>
  
        <p id="demo"></p>
  
        <script>
            var drag = document.getElementById(
              "dragtarget");
            var drop = document.getElementById(
              "droptarget");
  
            // Events fired on the drag target 
            drag.ondragstart = function(event) {
                event.dataTransfer.setData(
                  "Text", event.target.id);
            };
  
            drag.ondrag = function(event) {
                document.getElementById(
                  "demo").innerHTML = 
                  "Dragging starts";
            };
  
            // Events fired on the drop target
            drop.ondragover = function(event) {
                event.preventDefault();
                document.getElementById(
                  "demo").innerHTML = 
                  "Element is over the dropzone";
                event.target.style.border =
                  "6px dotted green";
            };
  
            drop.ondrop = function(event) {
                event.preventDefault();
                var data = 
                    event.dataTransfer.getData("Text");
                event.target.appendChild(
                  document.getElementById(data));
                document.getElementById(
                  "demo").innerHTML = "Dragging finished";
            };
        </script>
    </center>
</body>
  
</html>

Producción:

Ejemplo: uso del método addEventListener()

<!DOCTYPE HTML>
<html>
  
<head>
    <style>
        #droptarget {
            float: center;
            width: 300px;
            height: 50px;
            margin: 20px;
            margin-top: 30px;
            padding: 5px;
            border: 6px solid green;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <h2>HTML DOM ondragover Event</h2>
        <p draggable="true" id="dragtarget">
          Draggable element
      </p>
  
        <div id="droptarget"></div>
  
        <p id="try"></p>
  
        <script>
            var drag = document.getElementById(
              "dragtarget");
            var drop = document.getElementById(
              "droptarget");
  
            // Events fired on the drag target 
  
            drag.addEventListener(
              "dragstart", function(event) {
                event.dataTransfer.setData(
                  "Text", event.target.id);
            });
  
            drag.addEventListener(
              "drag", function(event) {
                document.getElementById(
                  "try").innerHTML = "Dragging starts";
            });
  
            // Events fired on the drop target 
            drop.addEventListener("dragover", function(event) {
                event.preventDefault();
                document.getElementById(
                  "try").innerHTML = "Element is over the dropzone";
                event.target.style.border = "6px dotted green";
            });
  
            drop.addEventListener("drop", function(event) {
                event.preventDefault();
                var data = event.dataTransfer.getData("Text");
                
                event.target.appendChild(
                  document.getElementById(data));
                
                document.getElementById(
                  "try").innerHTML = "Dragging finished";
            });
        </script>
    </center>
</body>
  
</html>

Producción:

Navegadores compatibles: los navegadores compatibles con HTML DOM ondragover Event se enumeran a continuación:

  • Google Chrome 4.0
  • Internet Explorer 9.0
  • Firefox 3.5
  • Apple Safari 6.0
  • Ópera 12.0

Publicación traducida automáticamente

Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *