Jquery ui tiene una función llamada droppable(), esta función consiste en el Drag & Drop, es decir mover y soltar
elementos en un contenedor determinado, esta función tiene múltiples utilidades y todo es cuestión de probar hasta encontrar
el resultado deseado.
Eventos de droppable() ...
A continuación se puede ver un ejemplo de mover y soltar elementos con la función droppable() del plugin Jquery UI ...
Eventos de droppable() ...
- Evento create: ocurre cuando se crea el elemento droppable.
- Evento activate: se produce cuando un elemento draggable que se podría aceptar por el droppable empieza a arrastrarse.
- Evento deactivate: ocurre cuando un elemento draggable que se podría hacer aceptado se deja de arrastrar.
- Evento over: ocurre cuando un elemento draggable que fuese le aceptable entra en un área de tolerancia donde se podría soltar sobre el droppable.
- Evento out: lo mismo que over pero cuando sale de la tolerancia.
- Evento drop: cuando se suelta un elemento draggable sobre un droppable, siempre y cuando el draggable sea aceptado por el droppable y se suelte dentro del área definida por la tolerancia.
- ui.draggable: el objeto jQuery que corresponde con el elemento draggable que está provocando el evento.
- ui.helper: el helper del elemento draggable, otro objeto jQuery del elemento que se arrastra.
- ui.position: la posición del elemento draggable, relativa a donde esté contenido.
- ui.offset: la posición absoluta del elemento draggable.
- Evento out: lo mismo que over pero cuando sale de la tolerancia.
- Evento drop: cuando se suelta un elemento draggable sobre un droppable, siempre y cuando el draggable sea aceptado por el droppable y se suelte dentro del área definida por la tolerancia.
A continuación se puede ver un ejemplo de mover y soltar elementos con la función droppable() del plugin Jquery UI ...
10 comentarios:
Se puede reemplazar los li por imagenes?
pues claro incluye la imagen dentro de las etiquetas li, saludos.
como hago referencia a un atributo (por ejemplo: value) dentro de la etiqueta img esta dentro de un li draggable cuando este ha sido arrastrado dentro de un droppable?
Puedes hacerlo a través de attr, es decir, $("img").attr("value"); o otro atributo que necesites obtener su valor, $("img").attr("otro");
Muchas gracias Manu. Pero esto aplica para elementos droppeados. Me explico debo realizar una función que al hacer click en un botón me devuelva un array con los atributos "value" de los elementos img que he localizado en un tablero droppeable.
Este es un aparte de lo que estaba haciendo:
function componernumero(){
var $lista1 = $( "#lista1" ),
$lista2 = $( "#lista2" ),
$lista3 = $( "#lista3" ),
$lista4 = $( "#lista4" );
$( "li", $lista1 ).draggable({cursor: "move"});
$( "li", $lista2 ).draggable({cursor: "move"});
$( "li", $lista3 ).draggable({cursor: "move"});
$( "li", $lista4 ).draggable({cursor: "move"});
/*$( "#tablero" ).droppable({
accept: "#lista1 > li",
accept: "#lista2 > li",
accept: "#lista3 > li",
accept: "#lista4 > li",
activeClass: "ui-state-default",
drop: function( event, ui ) {
var valor =$(this).attr("value");
console.log(valor);}
});*/
//var i=-1;
var res=new Array();
res.lenght=0;
$("#tablero").droppable({
accept: "#lista1 > li",
accept: "#lista2 > li",
accept: "#lista3 > li",
accept: "#lista4 > li",
drop: function (ev, ui) {
// i=i+1;
var draggableId = ui.draggable.attr("value");
var droppableId = $(this).attr("value");
res.push(droppableId);
// Alert dragable elment id and dropable element Id
alert("dragable Element Id" + draggableId + " dropableId " + droppableId);
alert(res);
}
});
$("#button").click(function(){
return (res);
});
}
Te agradezco si me puedes dar alguna indicación al respecto.
Desde ya gracias.
Sandra creo que la solución, está en el siguiente ejemplo, cópialo y pruébalo haber que tal ...
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#draggable { width: 200px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; font-family: trebuchet, verdana, arial;}
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; font-family: trebuchet, verdana, arial;}
#aviso{font-family: trebuchet, verdana, arial;}
#nombre_elemento{font-family: trebuchet, verdana, arial;}
</style>
<script>
var imagenes = new Array();
$(function() {
$( "#draggable li" ).draggable();
$( "#droppable" ).droppable({
accept: "#draggable li",
drop: function( event, ui ) {
agregar = $(ui.draggable).attr('value');
//Agregar el value de la imagen al array
imagenes.push(agregar);
//Para mostrar las imágenes seleccionadas
var lista_imagenes = '';
//Recorrer una a una las imagenes seleccionadas
$.grep(imagenes, function(value, index)
{
lista_imagenes += value;
});
$("#aviso").html(lista_imagenes);
},
out: function( event, ui ) {
//Obtener el value de la imagen
quitar = $(ui.draggable).attr('value');
//Buscar el value de la imagen a eliminar
buscar = imagenes.indexOf(quitar);
//Eliminar la imagen
imagenes.splice(buscar, 1);
//Para mostrar las imágenes seleccionadas
var lista_imagenes = '';
//Recorrer una a una las imagenes seleccionadas
$.grep(imagenes, function(value, index)
{
lista_imagenes += value;
});
$("#aviso").html(lista_imagenes);
}
});
});
//Función para obtener el value de las imágenes
function get_value()
{
$.grep(imagenes, function(value)
{
//Aquí obtienes el value de cada una de las imágenes seleccionadas
alert(value);
});
}
//Click del botón para obtener value
$(function(){
$("#btn").click(function(){
get_value();
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<ul>
<li value="1">Elemento uno</li>
<li value="2">Elemento dos</li>
<li value="3">Elemento tres</li>
<li value="4">Elemento cuatro</li>
</ul>
</div>
<div id="droppable" class="ui-widget-content">
</div>
<div id="aviso">
</div>
<input type="button" value="Obtener value de las imágenes" id="btn">
</body>
</html>
Manu,
Mil gracias!!!..en efecto funcionó y era lo que efectivamente deseaba realizar. Fué muy bueno tu ejemplo, muy claro y sencillo de comprender. :)
No hay de que Sandra, me imaginaba que era esto lo que querías hacer, me alegra que te sirva, un saludo.
Hola Manuel,
Tengo algunas dudas con el manejo de las funciones y como obtener en ciertos casos los argumentos los argumentos que devuelve. En caso concreto si tengo la siguiente función:
function componernumero(valor,num){
var valortotal=valor;
var numf=parseInt(num); var a;
$(".listafichas li").draggable(); // declaro los elementos li de la clase .listafichas como draggable
$("#dragdetector").droppable({ // declaro al div con id=dragdetector como droppable
accept: "li", // le digo que acepte los elementos li
drop: function(ev, ui) {
$(ui.draggable).addClass("contar"); // le digo que cuando un elemento se arrastre hacia el le añada la clase .contar
}
});
$(".btnveri").on("click",function(){verificontar(valortotal); return;});
function verificontar(valor,dev) { // declaro la funcion verificontar
valortotal=valor;
var tomarfichas= $(".contar img"); // selecciono todos los elementos con la clase .contar (que son todos los que han sido arrastrados al elemento droppable, dentro de ellos selecciono las imagenes que son las fichas. Esto me devuelve un array de varias imagenes que estan dentro de un li que tiene la clase .contar.
$.each (tomarfichas, function () {// tomo el array tomarfichas
var valorficha= parseInt( $(this).attr("alt")); //a cada item dentro de ese array (o sea las imagenes de fichas) les tomo el valor del atributo "alt". A ese valor lo convierto en un numero porque viene como string.
valortotal+=valorficha; // le digo que valortotal es igual a la suma del valor de cada ficha.
});
console.log(valortotal); // hago que una ventana alert muestre el valor de valortotal.
if (valortotal==numf)
{ var a='true';
return a;
} else {
var a='false';
return a;}
}
}
Como obtener el valor de a (true o false) devuelto por la función verificontar, desde la función componernumero() para utilizarla en una llamada dentro de la función principal así:
var eval=componernumero(valor, num)
if (eval=="true) alert ("es correcto")
else alert ("es incorrecto");
Te agradecería si me puedes ayudar, ya no sé que hacer para obtener ese valor.
Hola necesito saber la manera de que un droppable admita solamente el draggable que posea la misma posición de este en un par de columnas una de draggables y la otra de droppables, como lo puedo resolver??? gracias
Publicar un comentario