jQuery UI, draggable / sortable append problem
I am trying to append html to an item which I have successfully dragged to a sortable list but it does not seem to work. I am cloning the original item and have tried to append to the ui.helper to no avail.
Here's what I have so far:
<head>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#sortable3").sortable({
revert: true,
receive: function(ev, ui) {
ui.item.append("Tsfsdfg");
save_object(ui.item);
}
});
$('li',"#sortable1").draggable({
connectToSortable: '#sortable3',
helper: 'clone',
revert: 'invalid',
});
function save_object($item) {
var the_id = $item.attr('id');
$item.append("This is it");
$item.slideUp(500,function(){
$(this).remove();
});
}
$("#sortable1, #sortable3").disableSelection();
});
</script>
</head>
<body>
<div class="demo">
<ul id="sortable1">
<li id="mx-101" class="ui-state-default">Num 1 <img src="images/icon_alert.png" alt="" /> </li>
<li id="mx-102" class="ui-state-default">Num 2 <img src="images/icon_clock.png" alt="" /></li>
<li id="mx-103" class="ui-state-default">Num 3 <img src="images/icon_congrats.png" alt="" /></li>
<li id="mx-104" class="ui-state-default">Num 4 <img src="images/icon_delete.png" alt="" /></li>
<li id="mx-105" class="ui-state-default">Num 5 <img src="images/icon_add.png" alt="" /></li>
</ul>
<ul id="sortable3">
</ul>
<br clear="both" />
</div><!-- End demo -->
</body>
I just want to append some sort of "un-delete" icon on the item that is dragged to the right side list so 开发者_JAVA技巧that I send it back to the original list. Can't seem to append anything to the dragged/cloned item, just the original and I am getting rid of that one.
Any ideas on how to accomplish this functionality? Should I just go with "droppable" on the right side list? I want that right side list to be sortable though.
Thanks
This is what I've used in the past:
function itemreceived(event, ui) {
$(this).find("li.ui-state-highlight").removeClass("ui-state-highlight").addClass("ui-state-default");
};
Just have the <li>s in #sortable1 marked with a class that you remove once they've been received in #sortable3.
BTW - Instead of setting #sortable1 to be draggable why not use connectWith: like here: http://jqueryui.com/demos/sortable/#connect-lists
加载中,请稍侯......
精彩评论