jQuery en utilisant Triable avec l'ajouter dynamiquement des éléments (live actualisation)

J'ai un <form id="#form"> qui ont un <span class="con"> et l'intérieur de la plage j'ai beaucoup de divs qui doit être triée.

<form id="form">
    <span class="con">
        <div class="ui-state-highlight">Item 1</div>
        <div class="ui-state-highlight">Item 2</div>
        ... 
    </span>
</form>

Je suis en utilisant la fonction sortable pour faire des div Sortable.

$("span").sortable({
    connectWith: ".con"
}).disableSelection();

Je suis l'ajout dynamique avec les divisions à l'intérieur. Mais sortable est de ne pas reconnaître nouvellement ajouté travées. Je sais qu'il y a un refresh option pour sortable qui est censé fonctionner comme live() et reognize nouvellement ajouté de contenu, mais je ne vois pas comment je peux l'utiliser avec cet exemple.

Vérifier http://jsfiddle.net/mRyVp/8/. Cliquez sur le bouton pour ajouter plus de travées avec les divisions à l'intérieur. Vous verrez que vous pouvez trier div qui étaient initialement dans les DOM, mais pas nouvellement ajouté.

Mise à jour jsfiddle lien
il semble que vous avez plusieurs sortable <span>, qui ne sera certainement pas travailler comme un seul groupe.
oui, vous pouvez connecter plusieurs travées. Vérifier exemple ici jqueryui.com/demos/sortable/#event-update. Depuis les travées sont ajoutées dynamiquement, il ne fonctionne pas, sinon, si tous ont été d'abord dans les DOM qu'il fonctionne.
il semble que vous avez raison, je vais regarder de nouveau le code.
J'ai pensé refresh était censé actualiser de façon dynamique le contenu ajouté mais cela ne fonctionne pas $('span').sortable('refresh')

OriginalL'auteur Pinkie | 2011-03-29

10

Il semble que vous avez class="connectedSortable" dans
```
<span class="connectedSortable">
    <div class="ui-state-highlight">Item 1</div>
    <div class="ui-state-highlight">Item 2</div>
    ... 
</span>
```
Et connectWith: ".con" dans
```
$("span").sortable({
    connectWith: ".con"
}).disableSelection();
```
Ajoutant con classe d'origine div va juste être bien. Mise à jour ici.

Grâce expérimenter +1. mais c'est un peu maladroit. Vous utilisez sortable deux fois, l'une au sein de la fonction de clic et une à l'extérieur. On ne doit utiliser qu'une seule fois et ensuite faire usage de l'option d'actualisation.
eh bien, j'ai vérifier de nouveau.
eh bien, le nouvellement créé <span> n'a pas sortable de la fonction associée avec elle, de sorte que nous avons à vous inscrire à nouveau(après sa création) sinon cela ne fonctionnera pas.

OriginalL'auteur Santosh Linkha

Essayez ceci:

$('button').click(function() {
    var x = $('<div class="ui-state-highlight">Item '+($('.con div').length+1)+'</div>');
    x.appendTo('#form .con')
});

$("span").sortable({
    connectWith: ".con"
}).disableSelection();

Lorsque vous cliquez sur "ajouter une autre option", le script va ajouter de nouvelles sortable "Item" dans la liste

OriginalL'auteur Nick

0

Modifier l'événement Clic du Bouton comme indiqué ci-dessous, et il fonctionne. Pas d'autres changements sont nécessaires.
J'ai essayé en jfiddler et cela a fonctionné. Nouvellement ajouté des éléments devient un élément de la liste et sont triables.
```
$('button').click(function() {
    var x = $('<div>aaaaaaaaa</div>');
    x.appendTo('#form .con')
});
```
Je définis x comme élément et de plus x est appenedTo ".con" de classe à l'intérieur de #forme.

La capture d'écran de la mise à jour de l'exemple est montré ci-dessous:

Vérifiez ci-dessus jsfiller ci-dessous:jsfiddle.net/ats3x62g/1

OriginalL'auteur Rahul Varadkar

Vous devez vous connecter pour publier un commentaire.