Événement d'appel après le tri dans JQuery
Problème Actuel
À réapprendre jQuery/jQueryUI, je vais essayer d'appeler un événement sur un élément après le tri. C'est probablement relativement simple à faire puisque jQuery a beaucoup de façons de mettre en œuvre des rappels.
JS:
jQuery(document).ready(function($) {
$('ul').addClass('list-unstyled');
$('.sortable').sortable({
revert: true,
connectWith: ".sortable"
});
});
CSS:
ul {
margin: .8rem 2rem !important;
}
li {
margin: 0;
padding: 0;
}
div>div {
border: 1px solid #999;
margin-bottom: 2px;
}
body {
padding: 1rem;
}
.sortable {
cursor: pointer;
}
.sortable>div:hover {
background: #f0f0f0;
}
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" integrity="sha256-Bxxp5LTCU2v12w2d0kxKb0vt5F4EgtrzcJKJSR3Xxio=" crossorigin="anonymous"></script>
<div class="sortable">
<div>
<ul class="1">
<li>test 1</li>
<li>test 2</li>
</ul>
</div>
<div>
<ul class="2">
<li>test 3</li>
<li>test 4</li>
</ul>
</div>
</div>
<div class="sortable">
<div>
<ul class="3">
<li>test 7</li>
<li>test 8</li>
</ul>
</div>
<div>
<ul class="4">
<li>test 9</li>
<li>test 0</li>
</ul>
</div>
</div>
Alors disons que je déplacer les 3/4 de la liste. Je veux émettre un rappel (pour changer le fond ou la taille de la police) après que l'élément est terminé le déplacement.
Modifier(s)
- 20101019-1145EST: je pense que j'ai besoin d'être plus clair. J'essaie d'appeler l'événement sur un élément particulier, qui est triée. Je suppose que je pourrais être en mesure d'utiliser le
sort
/change
fonction, mais ne devrait-il pas être une condition impliqués? Cela implique plus de l'ajout d'une classe, l'éventuelle fonction j'ai l'intention de joindre allons effectuer certaines AJAX ainsi que certains calculs.
Vous devez vous connecter pour publier un commentaire.
Utiliser le
stop
cas de lasortable
plugin.Dans votre exemple
(dp.parent.width - dp.width)/2
. Finalement, je vais inclure les colonnes sont d'accord pour redimensionner, et ce que devrait être juste à gauche/à droite justifié. Il y a peut être un moyen plus facile de faire cela, mais je suis en train de travailler avec un multi-colonnes.ui.item.find('.2')
semble faire ce dont j'ai besoin pour la traversée, la fonction stop() fait aussi ce dont j'ai besoin. -- Je sais juste comment inefficace, cela va être, cependant.ui
avez un objet que définit la destination de l'objet? Exemple, j'ai deux".sortable ci dessus. Est-il un moyen de voir ce conteneur, il a été supprimé dans l'?receive: function(event,ui)
cas de drop élément, et ensuite vous avez accès àui.sender
Une liste des événements du jquery ui sortable plugin peut être trouvé ici: http://jqueryui.com/demos/sortable/#events
La documentation pour les événements peuvent être trouvés ici: http://jqueryui.com/demos/sortable/
Je devine que vous souhaitez utiliser le
sort
ou lachange
événement.