Sortable and clone
Sortable and clone
I got stuck into problem since 2 days. Here we have drug and drop and
we want to do clone items from right box to left. If i use draggable,
it works, but all droped items is no more possible to delete after
drop ???
If i use both sortable, there is not posible to clone (sortible dont
support clone) ???
How can i resolve this. is it bug or am i doing something wrong.
Gol is to have "read only" items in right side with possibility to
drag and drop to left side and after to manipulate left list with sort
and delete.
Tnx in advance
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
.playlist
{
width: 400px;
background-color: #999;
float:left;
clear: both;
}
.browser
{
width: 400px;
background-color: #999;
float:left;
clear: both;
}
.main-item
{
width: 400px;
background-color: #999;
float:left;
clear: both;
}
.move-item {
cursor: move;
background-color: #CCC;
width: auto;
float: left;
}
.name-item {
cursor: text;
width: auto;
float: left;
}
.delete-item {
cursor: pointer;
background-color: #666;
width: auto;
float: right;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></
script>
<script type="text/javascript">
$(function() {
// ---------------------------------------------------------------
$(".delete-item").click(function(){
$(this).parent().remove(); // delete row eith tr class delete-item
});
// ---------------------------------------------------------------
$(".playlist").sortable({ // playlist sorter
});
// ---------------------------------------------------------------
$(".browser").sortable({ // browser drager
connectWith: ".playlist",
helper: 'clone',
});
// ---------------------------------------------------------------
// $(".browser").draggable({
// connectToSortable: '.playlist',
// helper: 'clone',
// });
// ---------------------------------------------------------------
});
</script>
</head>
<body>
<table width="800" border="1" align="center">
<tr>
<td width="50%">
<div class="playlist">
<div class="main-item">
<div class="move-item"> ||| </div>
<div class="name-item">Bla bla 1</div>
<div class="delete-item"> X </div>
</div>
<div class="main-item">
<div class="move-item"> ||| </div>
<div class="name-item">Bla bla 2</div>
<div class="delete-item"> X </div>
</div>
</div>
</td>
<td width="50%">
<div class="browser">
<div class="main-item">
<div class="move-item"> ||| </div>
<div class="name-item">Bla bla 4</div>
<div class="delete-item"> X </div>
</div>
<div class="main-item">
<div class="move-item"> ||| </div>
<div class="name-item">Bla bla 5</div>
<div class="delete-item"> X </div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>