Haber si pueden ayudarme.
Estoy haciendo una web simple, pero con hartos efectitos bonitos de jquery.
Yo soy de los que ocupan los paquetes *.js pero no lee mucho los scripts pq me cuesta caleta el javascript, pero estos últimos 2 días ya he visto tanto al respecto que de a poco voy entendiendo de que se trata.
en fin..
Quiero lograr lo siguiente:
de un "sortable list" (lista ordenable) creado con jquery en una web, poder enviar arrastrando un elemento de la lista a un div "basurero" y que este desaparesca de la lista y en el basurero tambien(no que quede como papelera de reciclaje)
Voy a mostrar un par de ejemplos y luego la web simple creada por mi para que se hagan una idea.
ejemplo1: jQuery UI Draggables and Droppables playground
en este ejemplo se arrastra una lista fija de fotos a una papelera o a un borrado definitivo. (es para hacerce una idea )
ejemplo2: UI Sortable: Layout Demo
en este otro ejemplo realizan exactamente lo que quiero. hay un div que se llama trashcan donde se eliminan los elementos.
el problema es que no le pego al javascript y no logro entender el codigo a cabalidad, ademas trae varias funciones más que me son inutiles para lo que quiero.
En fin y aquí va lo mío. (los elementos se arrastran desde los iconos)
ordenar y remover
adjunto el código fuente tambien..
Codigo html
Código :
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>ordenar y votar :)</title> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"/> <script type="text/javascript" src="js/jquery-1.2.6.js"></script> <script type="text/javascript" src="js/ui.core.js"></script> <script type="text/javascript" src="js/ui.sortable.js"></script> <script type="text/javascript" src="js/ui.droppable.js"></script> <script type="text/javascript" src="js/ui.draggable.js"></script> <script type="text/javascript" src="demo.js"></script> </head> <body> <ul class="sortlist" id="sortlist1"> <li id="listItem_1"><img src="arrow_out.png" class="icono" alt="move" />numero 1</li> <li id="listItem_2"><img src="arrow_out.png" class="icono" alt="move" />numero 2</li> <li id="listItem_3"><img src="arrow_out.png" class="icono" alt="move" />numero 3</li> <li id="listItem_4"><img src="arrow_out.png" class="icono" alt="move" />numero 4</li> <li id="listItem_5"><img src="arrow_out.png" class="icono" alt="move" />numero 5</li> <li id="listItem_6"><img src="arrow_out.png" class="icono" alt="move" />numero 6</li> <li id="listItem_7"><img src="arrow_out.png" class="icono" alt="move" />numero 7</li> <li id="listItem_8"><img src="arrow_out.png" class="icono" alt="move" />numero 8</li> <li id="listItem_9"><img src="arrow_out.png" class="icono" alt="move" />numero 9</li> <li id="listItem_10"><img src="arrow_out.png" class="icono" alt="move" />numero 10</li> <li id="listItem_11"><img src="arrow_out.png" class="icono" alt="move" />numero 11</li> </ul> <input name="sortlist" id="sortlist" type="text" size="135" readonly="true" /> <div id="basurero" class="sortlist"></div> </body> </html>
codigo css file: style.css
Código :
/* CSS Document */
.sortlist {
width: 700px;
list-style: none;
padding: 0;
margin-top: 15px;
margin-left: 15px;
}
.sortlist li {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
width: 700px;
margin: 0 0 5px 0;
padding: 6px 15px 2px 10px;
}
.icono {
float: left;
margin-right: 10px;
margin-top: -1px;
padding-top: 0px;
cursor: pointer;
}
#basurero {
width:638px;
height:200px;
margin:0;
background:#000;
}
y finalmente el codigo js (javascript) file: demo.js
Código :
// JavaScript Document
$(document).ready(function() {
$('.sortlist').sortable({
handle : '.icono',
update : function () {
$('input#sortlist').val($('.sortlist').sortable('serialize'));
}
});
});
Si me pueden ayudar se los agradecería muchisimo.
y no el elemento de la lista. 
, he logrado bastante.. ,sin embargo, tengo una duda.