J'essaie d'ajouter html à un élément que j'ai réussi à faire glisser vers une liste triable, mais cela ne semble pas fonctionner. Je suis le clonage de l'élément d'origine et j'ai essayé d'ajouter à l'ui.helper en vain.jQuery UI, draggable/sortable problème d'ajout
Voici ce que j'ai jusqu'à présent:
<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>
Je veux juste ajouter une sorte de « non-suppression » icône sur l'élément qui est glissé dans la liste de droite pour que je le renvoyer à la liste originale. Impossible de sembler ajouter quoi que ce soit à l'élément déplacé/cloné, juste l'original et je me débarrasse de celui-ci.
Des idées sur la façon d'accomplir cette fonctionnalité? Devrais-je aller avec "droppable" sur la liste de droite? Je veux que cette liste de droite soit triable.
Merci