Forums Développement Multimédia

Aller au contenu

Jquery UI et ajax pour un drag and drop

CODE Ajax JQuery EaseJs

9 réponses à ce sujet

#1 pitch_65

    Ceinture Orange

  • Members
  • PipPipPip
  • 33 messages

Posté 29 March 2009 - 17:01 PM

Bonjour,
J'ai une interface admin ou sont représenté les blocs (ou menu) qui sont présent dans le site (colonne de gauche et colonne de droite).
J'utilise la librairie jQuery avec par dessus jQuery UI pour donc permettre a l'admin de positionner les bloc de menu ou il le souhaite a gauche ou a droite du site.Voila seulement je veux que lorsque il drag and drop au moment de relâcher le bloc pour le mettre ou il veut cela enregistre la position du bloc dans la base de donnée. Je n'arrive pas a trouver dans la fonction sortable() se qui permet de savoir se qui fait quelle est placer avant ou après les autres blocs.
Pour l'instant dans mon admin en php il fonctionne avec un système de "poids" en fait il a un chiffre et plus il est grand donc plus le poids est lourd et plus il est en bas.

voila s'il vous plait aidez moi je ne me suis mis a jquery que depuis une semaine et je galère vraiment
merci d'avance

#2 nours312

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 294 messages

Posté 29 March 2009 - 19:39 PM

Salut lorsque tu déclare ton élément, tu as une option change: function(el)( qui te permet d'eefectuer une opération d'ès le changement de position des éléments du groupe sortable (ici tes menus)
evenement change

tu vas utiliser ; serialize pour retrouver l'ordre des éléments sortables ....

ensuite, il te suffit de faire une requete Ajax, pour sauvegarder ainsi l'ordre (le poids .... je crois que c'est ainsi que tu le nome !!)

@+&BonCode wink.gif

Modifié par nours312, 29 March 2009 - 19:41 PM.


#3 pitch_65

    Ceinture Orange

  • Members
  • PipPipPip
  • 33 messages

Posté 30 March 2009 - 14:29 PM

Wow merci !
Tu peux m'expliquer un peu plus les fonctionnement de ces fonctions,
j'avais regarder déjà la doc mais c'est vrai que mon niveau d'anglais est assez bas (ce qui explique surement pourquoi j'ai raté ces fonction en l'étudiant) quand a la traduction google elle me trompe plus que autre chose.
s'il te plait aide moi un peu plus je te passe mon début de travail si sa peut t'aider a mieu expliquer mon cas ( enfin il manque toute la partie php encore puisque je doit faire un premier essai simple et quand sa marchera je l'adapterai au systeme php complet )
merci beaucoup en tout cas pour le temps que tu a déjà passé et que tu passera (peut être icon_biggrin.gif )

#4 nours312

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 294 messages

Posté 30 March 2009 - 17:34 PM

honetement, je me sert des class scriptaculous ... et non, jquery ... donc là, j'ai un peu de mal ! wink.gif

mais l'idée est que la fonction serialisation permet de récupéré la liste (tableau) des éléments sortables ....

change est un évènement, à chaque fois que tu déplace un élément, et que son emplacement est modifié cet évènement est appelé ...

donc, en théorie, change:function(e){alert("Vous avez modifier l'emplacement de "+e.id);} doit t'afficher une alert à chaque fois que tu change l'emplacement des éléments sortables ...

Essaye de laplcer, en attendant, je regarde de plus près le fonctionnement JQuery de serialize ! wink.gif

@+

#5 nours312

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 294 messages

Posté 30 March 2009 - 17:44 PM

donc je reprend :

$('.selector').sortable({
   change: function(event, ui) { alert($('.selector').sortable( 'serialize')); }
});
// testes ça ! wink.gif

si cela fonctionne bien, il te suffit de changer la fonction alert() par une fonction en charge d'effectuer une requete AJAX à ton script PHP stockant l'ordre d'emplacement de tes éléments !!

... je crois que c'est bon ! non ?

BonCode wink.gif

Modifié par nours312, 30 March 2009 - 17:45 PM.


#6 pitch_65

    Ceinture Orange

  • Members
  • PipPipPip
  • 33 messages

Posté 31 March 2009 - 10:23 AM

Ahah j'avance !

j'avance même très bien grâce a toi j'ai fait des recherches sur se que tu m'a dis et j'ai trouver un code qui marche avec une liste.
Mais j'ai un nouveau problème, car moi j'ai deux colonnes, .droite et .gauche.Pour pouvoir effectuer un drag and drop sur tous les blocs de .gauche et .droite et pouvoir passer un bloc d'une colonne a l'autre ( de .gauche a .droite et vise versa ) j'attribue dynamiquement une class bloc a ces deux colonnes

$(".gauche, .droite").addClass("bloc");

voila donc mon javascript avec la fonction sortable() et serialize

$(".bloc").sortable({
			connectWith: '.bloc',
			update : function () {
				var order = $('.bloc').sortable('serialize');
  				$("#info").load("ordre.php?"+order);
				}
		});

et voici le php qui est sensé ajouter a la base de donnée (la cé juste pour tester)

<?php
foreach ($_GET['bloc'] as $position => $item) :
	$sql[] = "UPDATE `table` SET `position` = $position WHERE `id` = $item"."<br/>";
endforeach;

print_r ($sql);
?>

Le problème donc j'y arrive icon_razz.gif

il ne me prend les changements (update) que sur la colonne de gauche et pas sur la colonne de droite.
comment je fais pour qu'il voit le changement sur les deux colonne
Ah oui par contre je veux que l'ont puisse savoir sur quel colonne est le bloc donc je m'y pren peut être mal a essayer de tous mettre sur la meme fonction, quel est la meilleur solution a ton avis ?
merci d'avance

#7 dji_bi26

    Ceinture Orange

  • Members
  • PipPipPip
  • 45 messages

Posté 08 April 2009 - 12:39 PM

Salut,

ce topic m'a bien aidé jusqu'ici mais je rencontre un problème, voici mon code :
Le HTML

<div id="imgList">
	<div class="test" id="link1">Item 1</div>
	<div class="test" id="link2">Item 2</div>
	<div class="test" id="link3">Item 3</div>
	<div class="test" id="link4">Item 4</div>
</div>

Le JS :

$(document).ready(function(){
		
		$('#linkList').sortable({
			change: function(event, ui) { 
				var order = $('#linkList').sortable('toArray');
				$("#info").load("ordre.php?order="+order);
			}
		});
		
	});

Le php

$order = explode(",", $_GET["order"]);
echo "<pre>";
print_r($order);
echo "</pre>";

Et voici le résultat après avoir déplacé un élément, il manque un ID dans la liste :

Array
(
    [0] => link1
    [1] => link3
    [2] => 
    [3] => link4
)

Pouvez-vous m'aider ?

#8 dji_bi26

    Ceinture Orange

  • Members
  • PipPipPip
  • 45 messages

Posté 09 April 2009 - 07:12 AM

Vous enmbêtez pas pour moi, j'ai trouvé la solution tout seul comme d'hab icon_wink.gif merci à ceux qui m'ont lu icon_biggrin.gif

#9 nours312

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 294 messages

Posté 09 April 2009 - 08:47 AM

alors, quel est elle ... ?

perso, je t'aurais bien aidé, mais comme je te l'ai dit, je n'utilise pas JQuery ... et c'est un pb que je n'ai jamais rencontré ... mais si tu pouvais nous expliquer ce qui se passait, ça serait profitable aux prochains !! wink.gif

@+

#10 gtraxxproductor

    Ceinture Orange

  • Members
  • PipPipPip
  • 41 messages

Posté 11 June 2009 - 10:18 AM

Je déterre ce sujet car j'ai un problème similaire avec ma liste.
je souhaite créer une liste de catégorie que je peux déplacer dans l'administration afin de modifier l'ordre.
Ma table se compose de :
    * id
    * libelle
    * id_order
Seulement étant donné que toutes les catégories vont alors changer de id_order il faudrais alors faire une requete sur tous le lot.
Comment procéder ? et surtout comment faire des deux coté , niveau jquery et niveau requete sql (for, foreach, while sur les update ??)
Voila mon code html :
Code :

<form action="" method="post">
		<ul id="sortable">
		<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><input type="hidden" name="order[]" value="1"/>ogre</li>
		<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><input type="hidden" name="order[]" value="2"/>machin</li>
               </ul>
<input type="submit" id="submit" />
	</form>

je souhaite alors utilisez un bouton pour mettre à jour l'ordre.
Comment faire pour mettre à jour l'ordre demandé dans ce cas il garde toujours la même valeur, je doit la changé suivant la place que je lui octrois ensuite il faut faire la requete pour modifier l"ordre.
Dois je envoyé un tableau avec un implode mais je doit attribué le nouvel identifiant à chacun, comment faire .
En plus le déplacement doit changer la valeur contenue dans le champ caché, j'ai essayer un truc mais sans succès.
jQuery("#sortable").sortable({cursor: 'pointer',change: function(event, ui){
	jQuery(this).attr('name','order');
}
});
jQuery("#sortable").disableSelection();
Je n'ai jamais utiliser UI sortable alors je suis un peu paumé



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)