unwrap - Cambiar la posición de divs con jquery arrastrar y soltar
remove content div jquery (4)
Aquí hay un ejemplo de trabajo: http://jsfiddle.net/Gajotres/zeXuM/
Creo que todos tus problemas se resuelven aquí.
- habilitar / deshabilitar trabajos de caída
- Los elementos que regresan ya no los dejan caer por debajo de otros elementos.
- Los elementos que retornan ya no se esconden / eliminarlos.
- Mejor posicionamiento de los elementos (se ve mejor).
- funciona en dispositivos móviles (probado en Android 4.1.1 Chrome y iPhone)
Aquí hay un código jQuery utilizado:
$(document).on(''pageshow'', ''#index'', function(){
$(".dragzones").draggable({
start: handleDragStart,
cursor: ''move'',
revert: "invalid",
});
$(".dropzones").droppable({
drop: handleDropEvent,
tolerance: "touch",
});
});
function handleDragStart (event, ui) { }
function handleDropEvent (event, ui) {
if (ui.draggable.element !== undefined) {
ui.draggable.element.droppable(''enable'');
}
$(this).droppable(''disable'');
ui.draggable.position({of: $(this),my: ''left top'',at: ''left top''});
ui.draggable.draggable(''option'', ''revert'', "invalid");
ui.draggable.element = $(this);
}
// This is a fix for mobile devices
/iPad|iPhone|Android/.test( navigator.userAgent ) && (function( $ ) {
var proto = $.ui.mouse.prototype,
_mouseInit = proto._mouseInit;
$.extend( proto, {
_mouseInit: function() {
this.element
.bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );
_mouseInit.apply( this, arguments );
},
_touchStart: function( event ) {
this.element
.bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
.bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );
this._modifyEvent( event );
$( document ).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse
this._mouseDown( event );
//return false;
},
_touchMove: function( event ) {
this._modifyEvent( event );
this._mouseMove( event );
},
_touchEnd: function( event ) {
this.element
.unbind( "touchmove." + this.widgetName )
.unbind( "touchend." + this.widgetName );
this._mouseUp( event );
},
_modifyEvent: function( event ) {
event.which = 1;
var target = event.originalEvent.targetTouches[0];
event.pageX = target.clientX;
event.pageY = target.clientY;
}
});
})( jQuery );
El autor original de un complemento touchFix utilizado en este ejemplo es Oleg Slobodskoi .
Estoy tratando de construir un sitio web donde el usuario pueda arrastrar algunos elementos (un elemento en div) a otros divs en la página. No es una tabla o algo así, solo divs en algún lugar de la página.
Con html5 arrastrar y soltar funciona bien, ahora trato de hacer esto para dispositivos móviles. Puedo arrastrar elementos a divs, soltarlos allí y bloquear esta zona de colocación, porque solo un elemento debe estar en una zona de colocación. También puedo arrastrar este elemento a otro div o a otro lugar en la página (las áreas que se pueden soltar solo funcionan la primera vez que se suelta un div) si he cometido un error, pero luego no puedo soltar otro elemento en el div que ahora está vacío otra vez.
¿Cómo puedo habilitar volver a soltar en esta Dropzone?
¿Y es posible cambiar dos veces la posición de dos divs si uno se arrastra en otro?
Aquí está la parte relevante de mi código:
<script type="text/javascript">
$ (init);
function init() {
$(".dragzones").draggable({
start: handleDragStart,
cursor: ''move'',
revert: "invalid",
});
$(".dropzones").droppable({
drop: handleDropEvent,
tolerance: "touch",
});
}
function handleDragStart (event, ui) {}
function handleDropEvent (event, ui) {
$(this).droppable(''disable'');
ui.draggable.position({of: $(this), my: ''left top'', at: ''left top''});
ui.draggable.draggable(''option'', ''revert'', "invalid");
}
</script>
<body>
<div id="alles">
<div class="dropzones" id="zone1"><div class="dragzones" id="drag1">Item 1</div></div>
<div class="dropzones" id="zone2"><div class="dragzones" id="drag2">Item 2</div></div>
<div class="dropzones" id="zone3"><div class="dragzones" id="drag3">Item 3</div></div>
<div class="dropzones" id="zone4"><div class="dragzones" id="drag4">Item 4</div></div>
<div class="dropzones" id="zone11"></div>
<div class="dropzones" id="zone12"></div>
<div class="dropzones" id="zone13"></div>
<div class="dropzones" id="zone14"></div>
</div>
</body>
EDITAR: Aquí está la página de trabajo ahora: arrastrar y soltar tarea
Esto es lo que he conseguido:
$ (init);
function init() {
$(".dragzones").draggable({
start: handleDragStart,
cursor: ''move'',
revert: ''invalid'',
opacity: .5,
});
$(".dropzones").droppable({
drop: handleDropEvent,
tolerance: "touch",
out: handleDropRemove
});
//prevents dragging to filled default droppables on start
$(".dropzones").each(function(){
if ($(this).html().length) {
$(this).addClass(''taken'');
}
});
}
function handleDragStart (event, ui) {}
function handleDropRemove(event, ui) {
//allows drop after removal
$(this).removeClass(''taken'');
}
function handleDropEvent (event, ui) {
if ($(this).hasClass(''taken'')) {
//rejects drop if full
ui.draggable.draggable(''option'', ''revert'', true);
} else {
//accepts drop if enpty
ui.draggable.position({of: $(this), my: ''left top'', at: ''left top''});
$(this).addClass(''taken'');
}
}
Hay un par de problemas que estoy tratando de resolver todavía. Parece que si el cursor toca la parte inferior de una zona de arrastre cuando se llena, se llama a la función de salida. Parece que no puedo descubrir cómo prevenir eso.
Tu enlace de "Ejemplo" parece funcionar correctamente. Pero me gustaría darle una solución genérica a su problema.
Básicamente se ve el estado de dropzone. Cuando el usuario suelta el elemento, verifica si Dropzone está disponible o no. si no se establece "revertir" verdadero.
function handleDropEvent (event, ui) {
if ($(this).hasClass(''occupied'')) {
ui.draggable.draggable(''option'', ''revert'', true);
return false;
}
$(this).append(ui.draggable);
ui.draggable.position({of: $(this), my: ''left top'', at: ''left top''});
ui.draggable.css(''z-index'', 0);
setTimeout(validateDropzones, 0);
}
El ejemplo completo de trabajo está aquí: http://jsfiddle.net/jaygiri/SRPm2/
Gracias.
EDITADO:
En cada gota exitosa puede guardar el último objeto de gota en el elemento que se puede arrastrar. Por lo tanto, cuando el elemento que se puede arrastrar se mueve a otro objeto drop, puede habilitar el dropable del objeto dropeado anterior.
Vea abajo:
Intenta modificar el handleDropEvent para:
function handleDropEvent(event, ui) {
if (ui.draggable.lastDropObject !== undefined) {
ui.draggable.lastDropObject.droppable(''enable'');
}
var dropObject = $(this);
dropObject.droppable(''disable'');
ui.draggable.position({
of: $(this),
my: ''left top'',
at: ''left top''
});
ui.draggable.draggable(''option'', ''revert'', "invalid");
ui.draggable.lastDropObject = dropObject;
}
Ejemplo completo de trabajo basado en su código fuente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Drag & Drop with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="title" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://www.didaktik.physik.uni-muenchen.de/forschung/elektronenbahnen/Betaversion/Tests/Styletest.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.didaktik.physik.uni-muenchen.de/forschung/elektronenbahnen/Betaversion/Tests/../Alle Seiten/JS/jquery.js"></script>
<script type="text/javascript" src="http://www.didaktik.physik.uni-muenchen.de/forschung/elektronenbahnen/Betaversion/Tests/../Alle Seiten/JS/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="http://www.didaktik.physik.uni-muenchen.de/forschung/elektronenbahnen/Betaversion/Tests/../Alle Seiten/JS/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
var test;
$(init);
function init() {
$(".dragzones")
.draggable({
start: handleDragStart,
cursor: ''move'',
revert: "invalid"
});
$(".dropzones")
.droppable({
drop: handleDropEvent,
tolerance: "touch",
});
};
function handleDragStart(event, ui) {}
function handleDropEvent(event, ui) {
if (ui.draggable.lastDropObject !== undefined) {
ui.draggable.lastDropObject.droppable(''enable'');
}
var dropObject = $(this);
dropObject.droppable(''disable'');
ui.draggable.position({
of: $(this),
my: ''left top'',
at: ''left top''
});
ui.draggable.draggable(''option'', ''revert'', "invalid");
ui.draggable.lastDropObject = dropObject;
}
function check() {
var i = 1;
var richtige = 0;
while (i <= 10) {
var j = i + 10;
if (document.getElementById(''zone'' + j)
.innerHTML.search(''drag'' + i + ''"'') == 27) {
document.getElementById(''zone'' + j)
.style.border = ''2px solid green'';
richtige++;
} else {
document.getElementById(''zone'' + j)
.style.border = ''2px solid red'';
}
i++;
alert(document.getElementById(zone + j)
.innerHTML);
};
}
</script>
</head>
<body>
<div id="alles">
<div id="hintergrundbildZuordnungsaufgaben">
<img src="http://www.didaktik.physik.uni-muenchen.de/forschung/elektronenbahnen/Betaversion/Tests/../E-Feld/Bilder/Versuchsaufbau-Elektronenablenkroehre-unbeschriftet.png" width="740">
</div>
<div class="dropzones" id="zone1">
<div class="dragzones" id="drag1">Item 1</div>
</div>
<div class="dropzones" id="zone2">
<div class="dragzones" id="drag2">Item 2</div>
</div>
<div class="dropzones" id="zone3">
<div class="dragzones" id="drag3">Item 3</div>
</div>
<div class="dropzones" id="zone4">
<div class="dragzones" id="drag4">Item 4</div>
</div>
<div class="dropzones" id="zone5">
<div class="dragzones" id="drag5">Item 5</div>
</div>
<div class="dropzones" id="zone6">
<div class="dragzones" id="drag6">Item 6</div>
</div>
<div class="dropzones" id="zone7">
<div class="dragzones" id="drag7">Item 7</div>
</div>
<div class="dropzones" id="zone8">
<div class="dragzones" id="drag8">Item 8</div>
</div>
<div class="dropzones" id="zone9">
<div class="dragzones" id="drag9">Item 9</div>
</div>
<div class="dropzones" id="zone10">
<div class="dragzones" id="drag10">Item 10</div>
</div>
<div class="dropzones" id="zone11"></div>
<div class="dropzones" id="zone12"></div>
<div class="dropzones" id="zone13"></div>
<div class="dropzones" id="zone14"></div>
<div class="dropzones" id="zone15"></div>
<div class="dropzones" id="zone16"></div>
<div class="dropzones" id="zone17"></div>
<div class="dropzones" id="zone18"></div>
<div class="dropzones" id="zone19"></div>
<div class="dropzones" id="zone20"></div>
<button id="check" value="Check" onclick="check()">Check</button>
</div>
</body>
</html>
Espero que esto ayude.