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>
<br>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
