Debe ser una combinación de CSS y JavaScript. Los pasos para hacerlo debe ser:

  1. Lo hacen en la parte superior de todos los otros elementos (que la propiedad para especificar?)
  2. Capturar el evento cuando se hace clic en (evento que escuchar?)
  3. Mover el div como el ratón se mueve.

Pero ¿cuáles son los detalles?

  • Me doy cuenta de que esta es una vieja cuestión, pero me di cuenta de que no ha aceptado una respuesta y yo estoy tratando de hacer algo similar, así que me preguntaba qué respuesta ha funcionado mejor para usted?
InformationsquelleAutor omg | 2009-06-24

7 Comentarios

  1. 28

    El jQuery Manera:

    Retirar el jQueryUI complementos se pueden arrastrar y lanzables.

    Literalmente cientos de horas se han invertido en el framework jQuery para hacer tareas complicadas como esta, casi trivial. Aprovechar el equipo de jQuery esfuerzos para hacer que la programación rico de la cruz-las aplicaciones de los navegadores más fácil para todos nosotros 😉

    Chuck Norris’ Manera:

    Si insisten en tratar este crudos con javascript. Te quiero hacer un par de cosas. Uno, establecer mediante programación a todos los que se pueden arrastrar los elementos a un familiar/posicionamiento absoluto. Si hace clic en un elemento en particular, porque la parte superior izquierda de los valores en CSS para reflejar los cambios realizados por los ejes x,y de la del ratón hasta que el clic es liberado. Además, usted querrá actualizar el z-index de cada arrastrarse cuando se hace clic en él para traerlo a la vista.

    Tutorial: Cómo Arrastrar y Soltar con Javascript

    • +1 para «Chuck Norris «Camino», que voy a usar en todas partes a partir de ahora. 🙂
    • Gracias por su actualización.La razón por la que quiero usar raw javascript es que estoy haciendo esto para el propósito del estudio.Creo que he enumerado los trabajos a realizar para su aplicación,pero no sé la más detalle los pasos:(
    • el mejor enlace es luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx. tanto el enlace en esta respuesta y david flanagan enlace no manejar ondragstart evento en IE que va a causar problemas en IE.
    • jajaja «Chuck Norris «Camino».. no wayy 😛 +1
    • el tutorial url no funciona más
  2. 14
    1. sea absoluta posicionado, con un alto índice z.
    2. de verificación para onmousedown de la div.
    3. uso del evento mouseX y mouseY atributos para mover la div.

    He aquí un ejemplo de Javascript, la Guía Definitiva (actualizado aquí):

    /**
    *  Drag.js:    drag absolutely positioned HTML elements.
    *
    *  This module defines a single drag() function that is designed to be called
    *  from an onmousedown event handler. Subsequent mousemove event will
    *  move the specified element. A mouseup event will terminate the drag.
    *  If the element is dragged off the screen, the window does not scroll.
    *  This implementation works with both the DOM Level 2 event model and the
    *  IE event model.
    *
    *  Arguments:
    *
    *      elementToDrag: the element that received the mousedown event or
    *          some containing element. It must be absolutely positioned. Its
    *          style.left and style.top values will be changed based on the user's
    *          drag.
    *
    *      event: ethe Event object for the mousedown event.
    *
    *  Example of how this can be used:
    *      <script src="Drag.js"></script> <!-- Include the Drag.js script -->
    *      <!-- Define the element to be dragged -->
    *      <div style="postion:absolute; left:100px; top:100px; width:250px;
    *                  background-color: white; border: solid black;">
    *      <!-- Define the "handler" to drag it with. Note the onmousedown attribute. -->
    *      <div style="background-color: gray; border-bottom: dotted black;
    *                  padding: 3px; font-family: sans-serif; font-weight: bold;"
    *          onmousedown="drag(this.parentNode, event);">
    *      Drag Me <!-- The content of the "titlebar" -->
    *      </div>
    *      <!-- Content of the draggable element -->
    *      <p>This is a test. Testing, testing, testing.<p>This is a test.<p>Test.
    *      </div>
    *
    *  Author: David Flanagan; Javascript: The Definitive Guide (O'Reilly)
    *  Page: 422
    **/
    function drag(elementToDrag, event)
    {
    //The mouse position (in window coordinates)
    //at which the drag begins
    var startX = event.clientX, startY = event.clientY;
    //The original position (in document coordinates) of the
    //element that is going to be dragged. Since elementToDrag is
    //absolutely positioned, we assume that its offsetParent is the
    //document bodt.
    var origX = elementToDrag.offsetLeft , origY = elementToDrag.offsetTop;
    //Even though the coordinates are computed in different
    //coordinate systems, we can still compute the difference between them
    //and use it in the moveHandler() function. This works because
    //the scrollbar positoin never changes during the drag.
    var deltaX = startX - origX, deltaY = startY - origY;
    //Register the event handlers that will respond to the mousemove events
    //and the mouseup event that follow this mousedown event.
    if (document.addEventListener) //DOM Level 2 event model
    {
    //Register capturing event handlers
    document.addEventListener("mousemove", moveHandler, true);
    document.addEventListener("mouseup", upHandler, true);
    }
    else if (document.attachEvent) //IE 5+ Event Model
    {
    //In the IE event model, we capture events by calling
    //setCapture() on the element to capture them.
    elementToDrag.setCapture();
    elementToDrag.attachEvent("onmousemove", moveHandler);
    elementToDrag.attachEvent("onmouseup", upHandler);
    //Treat loss of mouse capture as a mouseup event.
    elementToDrag.attachEvent("onclosecapture", upHandler);
    }
    else //IE 4 Event Model
    {
    //In IE 4, we can't use attachEvent() or setCapture(), so we set
    //event handlers directly on the document object and hope that the
    //mouse event we need will bubble up.
    var oldmovehandler = document.onmousemove; //used by upHandler()
    var olduphandler = document.onmouseup;
    document.onmousemove = moveHandler;
    document.onmouseup = upHandler;
    }
    //We've handled this event. Don't let anybody else see it.
    if (event.stopPropagation) event.stopPropagation();    // DOM Level 2
    else event.cancelBubble = true;                        // IE
    //Now prevent any default action.
    if (event.preventDefault) event.preventDefault();      // DOM Level 2
    else event.returnValue = false;                        // IE
    /**
    * This is the handler that captures mousemove events when an element
    * is being dragged. It is responsible for moving the element.
    **/
    function moveHandler(e)
    {
    if (!e) e = window.event; // IE Event Model
    //Move the element to the current mouse position, adjusted as
    //necessary by the offset of the initial mouse-click.
    elementToDrag.style.left = (e.clientX - deltaX) + "px";
    elementToDrag.style.top = (e.clientY - deltaY) + "px";
    //And don't let anyone else see this event.
    if (e.stopPropagation) e.stopPropagation();       //DOM Level 2
    else e.cancelBubble = true;                       //IE
    }
    /**
    * This is the handler that captures the final mouseup event that
    * occurs at the end of a drag.
    **/
    function upHandler(e)
    {
    if (!e) e = window.event;    //IE Event Model
    //Unregister the capturing event handlers.
    if (document.removeEventListener) //DOM event model
    {
    document.removeEventListener("mouseup", upHandler, true);
    document.removeEventListener("mousemove", moveHandler, true);
    }
    else if (document.detachEvent)  // IE 5+ Event Model
    {
    elementToDrag.detachEvent("onlosecapture", upHandler);
    elementToDrag.detachEvent("onmouseup", upHandler);
    elementToDrag.detachEvent("onmousemove", moveHandler);
    elementToDrag.releaseCapture();
    }
    else    //IE 4 Event Model
    {
    //Restore the original handlers, if any
    document.onmouseup = olduphandler;
    document.onmousemove = oldmovehandler;
    }
    // And don't let the event propagate any further.
    if (e.stopPropagation) e.stopPropagation(); //DOM Level 2
    else e.cancelBubble = true;                 //IE
    }
    }
    function closeMe(elementToClose)
    {
    elementToClose.innerHTML = '';
    elementToClose.style.display = 'none';
    }
    function minimizeMe(elementToMin, maxElement)
    {
    elementToMin.style.display = 'none';
    }
    • Podría dar un prototipo de demostración?
    • Pensé que quería quedarse fuera de los marcos? (Suponiendo que te refieres a Prototipo, el marco).
    • A la derecha,quiero mantener lejos de marcos.Las cosas son fáciles al principio,pero también es fácil ir inesperadamente más adelante..
    • así es el código anterior más lo que estabas buscando?
    • +1 yo no sé si este es el código que estaba buscando, yo estaba lookign para esta gran pieza de código, gracias por compartir. Yo no entendía por qué utilizar setCapture, pero alféizar de su gran código.
  3. 4

    HTML5 Arrastrar y Soltar

    Si usted está leyendo esto en el año 2017 o posterior, es posible que desee echar un vistazo a el HTML5 Arrastrar y Soltar API:

    https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API

    Ejemplo:

    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
    function allowDrop(ev) {
    ev.preventDefault();
    }
    function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
    }
    function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
    }
    </script>
    <style>
    .draggable {
    border: 1px solid black;
    width: 30px;
    height: 20px;
    float: left;
    margin-right: 5px;
    }
    #target {
    border: 1px solid black;
    width: 150px;
    height: 100px;
    padding: 5px;
    }
    </style>
    </head>
    <body>
    <h1>Drag and Drop</h1>
    <h2>Target</h2>
    <div id="target" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <h2>Draggable Elements</h2>
    <div id="draggable1" class="draggable" draggable="true" ondragstart="drag(event)"></div>
    <div id="draggable2" class="draggable" draggable="true" ondragstart="drag(event)"></div>
    <div id="draggable3" class="draggable" draggable="true" ondragstart="drag(event)"></div>
    </body>
    </html>
    • Yo recomendaría a quitar la w3schools enlace de su respuesta, ya que su sitio no debe ser vinculado como una autoridad.
  4. 2

    Sí, usted puede usar jQuery si desea una hinchada de la biblioteca, con más funciones que usted necesita! O si quieres ser más de un elitista, uso Waltern Zorn arrastrar y soltar biblioteca, que es una décima parte del tamaño.

    • Sería bueno saber de donde la walterzorn.com sitio web terminó, ha sido por un tiempo desde julio/2010 [ref. forums.netobjects.com/… y sigue hacia abajo!!! En el enlace que he posetd que dicen que murió, es cierto?
    • Yo lo creo. Es una lástima que su obra no vivir.
    • Lo encontró! jsfiddle.net/stodolaj/ADpX6
    • gracias, he encontrado también una versión más RECIENTE que la tuya y pegado aquí: jsfiddle.net/ADpX6/2
    • No estoy convencido de sus diez veces menor. Tal vez dos veces?
    • El Waltern Zorn enlace está roto

  5. 2

    JS:

    function allowDrop(ev) {
    ev.preventDefault();
    }
    function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
    }
    function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
    }

    CSS:

    .mydiv {
    float: left;
    width: 100px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
    }

    HTML:

    <!DOCTYPE HTML>
    <html>
    <head>
    </head>
    <body>
    <h2>Drag and Drop</h2>
    <div id="div1" class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
    </div>
    <div id="div2" class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="div3" class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="div4" class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </body>
    </html>

  6. 1

    El estándar de Arrastrar y Soltar API es ampliamente reconocido a chupar grandes peludas bolas de burro. Así que no recomiendo hacerlo desde cero. Pero ya que es tu pregunta, hay una serie de requisitos para hacer algo arrastrarse, y un conjunto de requisitos para la correcta configuración de la zona de caída:

    Arrastrando:

    • El nodo dom debe tener el «draggable» de la propiedad se establece en true

    Nota: e.dataTransfer.setDragImage puede ser utilizado para establecer una alternativa de arrastre de la imagen (el valor predeterminado es una imagen transparente del nodo dom siendo arrastrado.

    Note2: e.dataTransfer.setData puede ser utilizado en el interior de la dragstart evento para establecer algunos datos que puede ser recuperado de la caída del evento.

    Caída:

    • En el dragover evento, e.preventDefault debe ser llamado
    • En el drop evento, e.preventDefault debe ser llamado

    Ejemplo:

    <body>
    <div id="dragme" draggable="true">Drag Me</div>
    <div id="dropzone">Drop Here</div>
    </body>
    <script>
    var dragme = document.getElementById('dragme')
    var dropzone = document.getElementById('dropzone')
    dragme.addEventListener('dragstart',function(e){
    dropzone.innerHTML = "drop here"
    })
    dropzone.addEventListener('dragover',function(e){
    e.preventDefault()
    })
    dropzone.addEventListener('drop',function(e){
    e.preventDefault()
    dropzone.innerHTML = "dropped"
    })
    </script>

    Sin embargo, hay un montón de trampas en el uso de esta API, incluyendo que:

    • se necesita un montón de trabajo para distinguir entre un dragmove evento a través de un dropzone y un dragmove evento relacionado con la posibilidad de arrastrar un elemento
    • dragmove incendios incluso si el ratón no se mueve
    • dragleave y dragenter incendio, incluso si su ratón no se mueve dentro o fuera de la escucha nodo dom (se activa cada vez que se cruza un niño-padre bounary por alguna estúpida razón)
    • Y más..

    Una mejor manera

    Escribí una operación de arrastrar y soltar de la biblioteca que hace un montón más fácil el uso del estándar de arrastrar y soltar API, sin todas esas artimañas. Échale un vistazo aquí:

    https://github.com/fresheneesz/drip-drop

    • por qué downvote esto?
    • Alguien, probablemente sintió ofendido por mi lenguaje. 20 años después de la escuela media y todavía estoy rodeada de niños. : p
    • alguien tenía que guardar este voto de desastres #upvoted 😉
  7. 1
    1. A traer el div en la parte superior de los elementos que usted necesita asignar un alto z-index. Además, puede establecer box-shadow para dar una retroalimentación al usuario de que el elemento draggable.
    2. Tienes que escuchar para un total de tres eventos: mousedown, mouseup, y mousemove. En mousedown usted tiene que adjuntar a un oyente en mousemove, que rastrea los movimientos del puntero del ratón y mueve el div en consecuencia, y en mouseup usted tiene que quitar el oyente en mousemove.
    3. Mover el div con el ratón es un poco complicado. Si usted traducir el div a la posición del ratón, el puntero siempre apunte a la esquina superior izquierda de la div, incluso cuando usted haga clic en en la esquina inferior derecha. Para esto, usted tiene que calcular la coordenada diferencia entre el div (esquina superior izquierda) y el puntero del ratón, en el mousedown controlador de eventos. Entonces, usted tiene que restar la diferencia de la posición del ratón antes de traducir el div a esa posición, en la mousemove controlador de eventos.

    Ver la demo para tener una mejor idea.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
    body,
    html {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    }
    #box {
    width: 100px;
    height: 100px;
    margin: auto;
    background-color: lightblue;
    }
    #box:active {
    border: 1px solid black;
    box-shadow: 2px 2px 5px 5px #bbb6b6;
    }
    </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
    <script>
    var box = document.getElementById("box");
    var diff = {};
    var getBoxPos = function() {
    return {
    x: box.getBoundingClientRect().x,
    y: box.getBoundingClientRect().y
    };
    };
    var calcDiff = function(x, y) {
    var boxPos = getBoxPos();
    diff = {
    x: x - boxPos.x,
    y: y - boxPos.y
    };
    };
    var handleMouseMove = function(event) {
    var x = event.x;
    var y = event.y;
    x -= diff.x;
    y -= diff.y;
    console.log("X " + x + " Y " + y);
    box.style.position = "absolute";
    box.style.transform = "translate(" + x + "px ," + y + "px)";
    };
    box.addEventListener("mousedown", function(e) {
    calcDiff(e.x, e.y);
    box.addEventListener("mousemove", handleMouseMove, true);
    });
    box.addEventListener("mouseup", function(e) {
    console.log("onmouseup");
    box.removeEventListener("mousemove", handleMouseMove, true);
    });
    </script>
    </html>

Dejar respuesta

Please enter your comment!
Please enter your name here