ondragstart - drag javascript
Dragend, Dragenter y Dragleave se disparan inmediatamente cuando arrastro (6)
Debes evitar que el "evento" se convierta en una burbuja para que no se activen otros eventos. Consulte https://developer.mozilla.org/en-US/docs/DOM/event.stopPropagation
Para startDrag, toggleDropStyles, removeDropSpaces, escribirías algo como esto:
function startDrag(ev) {
ev.stopPropagation();
... your code here ...
}
Estoy intentando hacer una lista de elementos que se pueden reposicionar arrastrando y soltando. El primer elemento, el Cuadro 1, funciona bien el 100% del tiempo. A veces, la segunda caja funciona, pero ninguna de las otras funciona como se esperaba. Parece que activan todos los eventos de arrastre a la vez tan pronto como empiezas a arrastrarlos.
Estoy usando el último Chrome (v23) si eso importa.
var $questionItems = $(''.question-item'');
$questionItems
.on(''dragstart'', startDrag)
.on(''dragend'', removeDropSpaces)
.on(''dragenter'', toggleDropStyles)
.on(''dragleave'', toggleDropStyles);
function startDrag(){
console.log(''dragging...'');
addDropSpaces();
}
function toggleDropStyles(){
$(this).toggleClass(''drag-over'');
console.log(this);
}
function addDropSpaces(){
$questionItems.after(''<div class="empty-drop-target"></div>'');
console.log(''drop spaces added'');
}
function removeDropSpaces(){
$(''.empty-drop-target'').remove();
console.log(''drop spaces removed'');
}
Aquí está el HTML:
<div class="question-item" draggable="true">Box 1: Milk was a bad choice.</div>
<div class="question-item" draggable="true">Box 2: I''m Ron Burgundy?</div>
<div class="question-item" draggable="true">Box 3: You ate the entire wheel of cheese?</div>
<div class="question-item" draggable="true">Box 4: Scotch scotch scotch</div>
Aquí hay un jsFiddle de mi código: http://jsfiddle.net/zGSpP/5/
La vida es más fácil con jQuery. Esto es exactamente lo que describiste que querías, usando jQueryUI.
http://jqueryui.com/draggable/#sortable
lo que permite la clasificación. El código:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable + Sortable</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable({
revert: true
});
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$( "ul, li" ).disableSelection();
});
</script>
</head>
<body>
<ul>
<li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</body>
</html>
También vea: http://jqueryui.com/sortable/
Intenta agregar los eventos manualmente, el camino largo, algo como:
$questionItems[0].on(''dragstart'', startDrag);
$questionItems[0].on(''dragend'', removeDropSpaces)
$questionItems[0].on(''dragenter'', toggleDropStyles)
$questionItems[0].on(''dragleave'', toggleDropStyles);
$questionItems[1].on(''dragstart'', startDrag);
$questionItems[1].on(''dragend'', removeDropSpaces)
$questionItems[1].on(''dragenter'', toggleDropStyles)
$questionItems[1].on(''dragleave'', toggleDropStyles);
¿Solo para ver el efecto?
No estoy seguro de si es un error o no, pero creo que el problema surge cuando cambias el DOM en el controlador de dragstart. El motivo por el que funciona el primer cuadro supongo que tiene algo que ver con el hecho de que su posición es anterior a los otros cuadros en el DOM y cuando se cambia el DOM, la posición (?) Del primero no se ve afectada y los eventos de arrastrar y soltar fuego de forma fiable.
Necesitará refactorizar su código un poco, y agregar los dropSpaces en el controlador de eventos de dragenter. Sin embargo, deberá cambiar el método addDropSpaces para adaptarse al hecho de que se llamará varias veces.
Parece ser un error de Chrome: https://groups.google.com/a/chromium.org/forum/?fromgroups=#!msg/chromium-bugs/YHs3orFC8Dc/ryT25b7J-NwJ
Tuvo este problema justo ahora: es un error de Chrome, no debe manipular el DOM en el evento dragStart o, de lo contrario, arrastrar y soltar se activará de inmediato. La solución para mí resultó ser: usar setTimeout () y manipular el DOM dentro de la función de tiempo de espera.
cambiar esta función
function addDropSpaces()
{
$(this).after(''<div class="empty-drop-target"></div>'');
}
en su versión está agregando ese div después de cada $ questionItems.