javascript - soltar - drag and drop que es
Arrastrar y soltar HTML5 en cualquier lugar de la pantalla (3)
Arrastrar y soltar no mueve los elementos, si desea que el elemento se mueva cuando lo suelta, debe establecer la nueva posición del elemento en el evento de colocación. He hecho un ejemplo que funciona en Firefox y Chrome, estos son los puntos clave:
function drag_start(event) {
var style = window.getComputedStyle(event.target, null);
event.dataTransfer.setData("text/plain",
(parseInt(style.getPropertyValue("left"),10) - event.clientX) + '','' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
}
El evento dragstart resuelve el desplazamiento del puntero del mouse desde la izquierda y la parte superior del elemento y lo pasa en dataTransfer . No me preocupa pasar el ID porque solo hay un elemento arrastrable en la página, sin enlaces ni imágenes, si tiene algo de eso en su página, entonces tendrá que trabajar un poco más aquí.
function drop(event) {
var offset = event.dataTransfer.getData("text/plain").split('','');
var dm = document.getElementById(''dragme'');
dm.style.left = (event.clientX + parseInt(offset[0],10)) + ''px'';
dm.style.top = (event.clientY + parseInt(offset[1],10)) + ''px'';
event.preventDefault();
return false;
}
El evento drop desempaqueta las compensaciones y las usa para posicionar el elemento relativo al puntero del mouse.
El evento de dragover solo necesita dragover cuando se arrastra algo. Nuevamente, si hay algo más que pueda arrastrarse en la página, es posible que deba hacer algo más complejo aquí:
function drag_over(event) {
event.preventDefault();
return false;
}
Así que conéctelo al document.body junto con el evento drop para capturar todo:
var dm = document.getElementById(''dragme'');
dm.addEventListener(''dragstart'',drag_start,false);
document.body.addEventListener(''dragover'',drag_over,false);
document.body.addEventListener(''drop'',drop,false);
Si quieres que esto funcione en IE necesitarás convertir el elemento aside to a , y, por supuesto, todo el código de enlace de evento será diferente. La API de arrastrar y soltar no funciona en Opera ni en ningún navegador móvil, hasta donde yo sé. Además, sé que dijiste que no querías usar jQuery, pero el enlace de eventos cross browser y las posiciones de los elementos de manipulación son el tipo de cosas que jQuery hace mucho más fáciles.
Tengo un registro de depurador que he escrito en JavaScript para un proyecto en el que estoy trabajando. El registro es básicamente una etiqueta <aside> en HTML5 que solo se muestra cuando es necesario. Quería jugar con la idea de poder mover el registro por la pantalla, ya que puede superponer ciertas cosas (lo cual está bien para mi proyecto). Sin embargo, parece que no puedo encontrar la manera de usar HTML5 para arrastrar y soltar correctamente la etiqueta para que pueda colocarse en cualquier parte de la pantalla (bueno, o dentro de un elemento <div> ).
Después de leer el soporte de arrastrar y soltar de HTML5, tengo una comprensión básica de cómo funciona, pero no estoy seguro de por dónde empezar cuando se trata de permitir que el div se coloque en cualquier lugar (su índice z es de alto valor, por lo que como dije, la superposición está bien).
¿Alguna sugerencia?
Ah, y me gustaría tratar de evitar el uso de bibliotecas externas para este proyecto, siempre que sea posible. Estoy tratando de hacer esto en JavaScript / HTML5 puro.
Gracias por tu respuesta. Funciona muy bien en Chrome y Firefox. Lo modifiqué para que funcione en IE. Abajo está el código.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Fri, 27 Jun 2014 21:02:23 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
li
{
position: absolute;
left: 0;
top: 0; /* set these so Chrome doesn''t return ''auto'' from getComputedStyle */
width: 200px;
background: rgba(255,255,255,0.66);
border: 2px solid rgba(0,0,0,0.5);
border-radius: 4px; padding: 8px;
}
</style>
<script>
function drag_start(event)
{
var style = window.getComputedStyle(event.target, null);
var str = (parseInt(style.getPropertyValue("left")) - event.clientX) + '','' + (parseInt(style.getPropertyValue("top")) - event.clientY)+ '','' + event.target.id;
event.dataTransfer.setData("Text",str);
}
function drop(event)
{
var offset = event.dataTransfer.getData("Text").split('','');
var dm = document.getElementById(offset[2]);
dm.style.left = (event.clientX + parseInt(offset[0],10)) + ''px'';
dm.style.top = (event.clientY + parseInt(offset[1],10)) + ''px'';
event.preventDefault();
return false;
}
function drag_over(event)
{
event.preventDefault();
return false;
}
</script>
</head>
<body ondragover="drag_over(event)" ondrop="drop(event)">
<ul>
<li id="txt1" draggable="true" ondragstart="drag_start(event)"> Drag this text </li><br>
<li id="txt2" draggable="true" ondragstart="drag_start(event)"> Drag me</li>
</ul>
<p>I never am really satisfied that I understand anything; because, understand it well as I may, my comprehension can only be an infinitesimal fraction of all I want to understand about the many connections and relations which occur to me, how the matter in question was first thought of or arrived at, etc., etc.</p>
<p>In almost every computation a great variety of arrangements for the succession of the processes is possible, and various considerations must influence the selections amongst them for the purposes of a calculating engine. One essential object is to choose that arrangement which shall tend to reduce to a minimum the time necessary for completing the calculation.</p>
<p>Many persons who are not conversant with mathematical studies imagine that because the business of [Babbage’s Analytical Engine] is to give its results in numerical notation, the nature of its processes must consequently be arithmetical and numerical, rather than algebraical and analytical. This is an error. The engine can arrange and combine its numerical quantities exactly as if they were letters or any other general symbols; and in fact it might bring out its results in algebraical notation, were provisions made accordingly.</p>
<p>The Analytical Engine has no pretensions whatever to originate anything. It can do whatever we know how to order it to perform. It can follow analysis, but it has no power of anticipating any analytical revelations or truths. Its province is to assist us in making available what we are already acquainted with.</p>
</body>
Ajusté un poco la gran respuesta de robertc para casos de artículos múltiples. Aquí el nombre de la second clase es solo para otra posición.
<aside draggable="true" class="dragme" data-item="0">One</aside>
<aside draggable="true" class="dragme second" data-item="1">Two</aside>
Agregue el atributo de elemento de datos a la función setData .
function drag_start(event) {
var style = window.getComputedStyle(event.target, null);
event.dataTransfer.setData("text/plain", (parseInt(style.getPropertyValue("left"), 10) - event.clientX) + '','' + (parseInt(style.getPropertyValue("top"), 10) - event.clientY) + '','' + event.target.getAttribute(''data-item''));
}
Apunte al elemento que se arrastra.
function drop(event) {
var offset = event.dataTransfer.getData("text/plain").split('','');
var dm = document.getElementsByClassName(''dragme'');
dm[parseInt(offset[2])].style.left = (event.clientX + parseInt(offset[0], 10)) + ''px'';
dm[parseInt(offset[2])].style.top = (event.clientY + parseInt(offset[1], 10)) + ''px'';
event.preventDefault();
return false;
}
Y dragme todos los elementos con un dragme clase.
var dm = document.getElementsByClassName(''dragme'');
for (var i = 0; i < dm.length; i++) {
dm[i].addEventListener(''dragstart'', drag_start, false);
document.body.addEventListener(''dragover'', drag_over, false);
document.body.addEventListener(''drop'', drop, false);
}