Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript > Bibliothèques & Frameworks > jQuery
jQuery Forum d'entraide sur le framework jQuery. Avant de poster : Tutoriels jQuery, FAQ jQuery, Tous les tutoriels JavaScript, Toutes les FAQ JavaScript
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 05/04/2011, 12h28   #1
Candidat au titre de Membre du Club
 
alfred
Inscription : mai 2010
Messages : 69
Détails du profil
Informations personnelles :
Nom : alfred

Informations forums :
Inscription : mai 2010
Messages : 69
Points : 10
Points : 10
Par défaut UI Sortable, j'essaie de trier deux divisions

Bonjour tt le monde ;
je suis entrain de découvrir jquery; j'ai créé 2 div dans ma page html et j'ai imporé les fichiers de jquery dans le header de mon fichier html;
bref, voila le code de ma page :
Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="Stylesheet" />	
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
<style>
#mondiv {
	width:150px;
	height:150px;
	background-color:#999;
}
</style>
<script>
	$(function() {
		$("mondiv").sortable();
		$("mondiv").disableSelection();
	});
</script>
</head>
 
<body>
<div class="demo">
 
<div id="mondiv">
	<p>text 1</p>
</div>
<div id="mondiv">
	<p>text 2</p>
</div>
 
</div><!-- End demo -->
</body>
</html>
lorsque j'ouvre ma page HTML, je tente de faire trier les 2 div (glisser l'un au dessus d l'autre) mais ça marche pas !!?
un aide SVP;
merci
alfred5 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 05/04/2011, 12h46   #2
Rédacteur/Modérateur
 
Avatar de SpaceFrog
 
Homme
Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Inscription : mars 2002
Messages : 30 007
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : Royaume-Uni

Informations professionnelles :
Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Secteur : Industrie

Informations forums :
Inscription : mars 2002
Messages : 30 007
Points : 45 091
Points : 45 091
comme son nom l'indique...
sortable
__________________
Ma page Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag


réalisations :www.planet-languages.com|www.saftair.com| www.ouestisol.fr | www.sebemex.fr | www.extramiante.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
SpaceFrog est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 05/04/2011, 12h58   #3
Candidat au titre de Membre du Club
 
alfred
Inscription : mai 2010
Messages : 69
Détails du profil
Informations personnelles :
Nom : alfred

Informations forums :
Inscription : mai 2010
Messages : 69
Points : 10
Points : 10
Citation:
Envoyé par SpaceFrog Voir le message
comme son nom l'indique...
sortable
Comment !! j'ai pas compris;
Prière de m'illustrer l'erreur
alfred5 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 05/04/2011, 13h18   #4
Membre expérimenté
 
Avatar de nadox
 
Homme
Développeur
Inscription : février 2010
Messages : 360
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Calvados (Basse Normandie)

Informations professionnelles :
Activité : Développeur
Secteur : High Tech - Multimédia et Internet

Informations forums :
Inscription : février 2010
Messages : 360
Points : 545
Points : 545
Code :
1
2
3
4
5
 
<ul id="monDiv">
    <li>1</li>
    <li>2</li>
</ul>
nadox est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 05/04/2011, 13h22   #5
Rédacteur/Modérateur
 
Avatar de SpaceFrog
 
Homme
Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Inscription : mars 2002
Messages : 30 007
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : Royaume-Uni

Informations professionnelles :
Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Secteur : Industrie

Informations forums :
Inscription : mars 2002
Messages : 30 007
Points : 45 091
Points : 45 091
un id DOIT être unique sur la page ...
__________________
Ma page Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag


réalisations :www.planet-languages.com|www.saftair.com| www.ouestisol.fr | www.sebemex.fr | www.extramiante.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
SpaceFrog est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 05/04/2011, 13h32   #6
Candidat au titre de Membre du Club
 
alfred
Inscription : mai 2010
Messages : 69
Détails du profil
Informations personnelles :
Nom : alfred

Informations forums :
Inscription : mai 2010
Messages : 69
Points : 10
Points : 10
Citation:
Envoyé par nadox Voir le message
Code :
1
2
3
4
5
 
<ul id="monDiv">
    <li>1</li>
    <li>2</li>
</ul>
oui ça marche si je met les ul.
je veux appliquer le tri sur les div? commet je peut faire ça ?
alfred5 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 05/04/2011, 13h34   #7
Candidat au titre de Membre du Club
 
alfred
Inscription : mai 2010
Messages : 69
Détails du profil
Informations personnelles :
Nom : alfred

Informations forums :
Inscription : mai 2010
Messages : 69
Points : 10
Points : 10
Citation:
Envoyé par SpaceFrog Voir le message
un id DOIT être unique sur la page ...
même si je change le nom de 2 eme div ça marche pas
alfred5 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 05/04/2011, 17h19   #8
Membre expérimenté
 
Avatar de nadox
 
Homme
Développeur
Inscription : février 2010
Messages : 360
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Calvados (Basse Normandie)

Informations professionnelles :
Activité : Développeur
Secteur : High Tech - Multimédia et Internet

Informations forums :
Inscription : février 2010
Messages : 360
Points : 545
Points : 545
Sortable permet de trier les éléments contenu dans la cible.
On n'appelle pas la méthode pour les éléments à trier, mais pour le conteneur des éléments à trier.

Donc avec quelque chose comme ça :
Code javascript :
1
2
 
        $( "#monDiv1, #monDiv2" ).sortable().disableSelection();
Code html :
1
2
3
4
5
6
7
8
9
10
11
 
<div id="monDiv1">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
<div id="monDiv2">
    <p>4</p>
    <p>5</p>
    <p>6</p>
</div>
tu rends le contenu de tes deux divs "sortable" mais séparément(on ne peux pas faire glisser un élément de l'une à l'autre).

Et avec quelque chose comme ça :
Code javascript :
1
2
3
4
 
        $( "#monDiv1, #monDiv2" ).sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
Code html :
1
2
3
4
5
6
7
8
9
10
11
 
<div id="monDiv1" class="connectedSortable">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
<div id="monDiv2" class="connectedSortable">
    <p>4</p>
    <p>5</p>
    <p>6</p>
</div>
tu rends tes deux div triable ensemble(on peut passer des éléments de l'une à l'autre).
nadox est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 01h48.


 
 
 
 
Partenaires

Hébergement Web