Drag & Drop.... & remove.. Duda de Jquery (javascript)

ganoncl · #1 (**permalink**) 04/12/2008, 22:30

Hola a todos, despues de tratar 2 días no pude asi que finalmente recurri al foro.
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: http:// ui.jquery.com/repository/real-world/photo-manager/
en este ejemplo se arrastra una lista fija de fotos a una papelera o a un borrado definitivo. (es para hacerce una idea )
ejemplo2: http:// ui.jquery.com/repository/real-world/layout/
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)
http:// www.propiedadesisrael.cl/sortlist/

nota: en las urls deje espacios en blanco pq no tengo mas de 30 mensajes en el foro :P

adjunto el codigo 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.

killerangel · #2 (**permalink**) 05/12/2008, 21:48

el div donde sueltas los elementos a eliminar tiene masomenos el codigo:

$("#div_borrar").droppable({
accept: "#mi_div",//selector del div( o divs ) q puedes arrastrar a este lugar para poder eliminarlos
drop: function(ev, ui) { //funcion q se e
//funcion q se ejecuta cuando sueltas uno de los elementos
//señalados en el selector, para el caso puede ser un remove()
}
});

aer si te sirve

salu2

ganoncl · #3 (**permalink**) 06/12/2008, 07:09

lo resolvi anoche.. pero gracias en todo caso :)
aquí va por sile sirve a alguien.

Código:

  //hacer el div para botar cosas.
$('#basurero').droppable({
      accept: '.sortlist li',
      drop: function(ev, ui) {
         $(this).append("eliminado!");
         $(ui.draggable).remove();         
      }
   });  
});