Sortable List & and remove(use a trash div)
Hi all i'am a newbie in jquery UI and JavaScript, I really have
problems with the next example.
Now i create a web page with a sortable list effect with handle:
-link to view my webpage: http://www.propiedadesisrael.cl/sortlist/
In the example i need to remove one element of sortable list when drag
the element to the black box (trash div), then the list need to
refresh.
Really i need the same effect as this page(url:
http://ui.jquery.com/repository/real-world/layout/ ), but with a
simple sortable list.
now my source code from html, css and js(use jquery)
html
[code]
<!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="trash" class="sortlist"></div>
</body>
</html>
[/code]
css code
[code]
/* 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;
}
#trash{
width:638px;
height:200px;
margin:0;
background:#000;
}
[/code]
js script
[code]
// JavaScript Document
$(document).ready(function() {
$('.sortlist').sortable({
handle : '.icono',
update : function () {
$('input#sortlist').val($('.sortlist').sortable
('serialize'));
}
});
});
[/code]
pd: sorry for my bad english..