UI Draggable. Non Selection d'un id

Version imprimable

bonsoir a tous!!

j'ai une structure ressemblant a la suivante :
Code:

1 2 3 4 5 6 7 <div id = "contentHolder"> <div id = "centerContent"> <div id = "todos"> <ul><li>drag</li></ul> </div> </div> </div>
voici le code css :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 #contentHolder{ display: block; background-color:#EEEEEE; border:2px solid #FFFFFF; height:600px; margin:10px; color:#444444; padding:15px; } #tabContent{ display: block; background-color:#333; border:1px solid #444; margin-top:-15px; float:left; width:700px; min-height: 600px; padding:10px; overflow: auto; }
alors en experimentant avec la bibliotheque jquery ui j'ai fait une remarque :

lorsque je fais :
-

Code:

$("#contenHolder").draggable();

ou bien
-

Code:

$("#centerContent").draggable();

je parviens a deplacer les divs!!

mais lorsque j'essaye :
-

Code:

$("#todos").draggable();

eh bien ca ne marche pas!
Quelqu'un peut m'expliquer pourquoi?

Bonsoir.

Je ne vois aucun problème, mais j'ignore le contenu de #tabContent. Voir les commentaires dans le code :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" type="text/css" href="../lib/jqueryui/css/humanity/jquery-ui-1.8.2.custom.css">	
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			height:500px;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
 
		/* TEST */
		#contentHolder{
			display: block;
			background-color:#EEEEEE;
			border:2px solid #FFFFFF;
			height:600px;
			margin:10px;
			color:#444444;
			padding:15px;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-ui-1.8.2.custom.min.js"></script>
 	<script>
		$(function(){
			/*
			 * Pas les trois en même temps à cause d'IE !
			 */
			$("#contentHolder").draggable();
			$("#centerContent").draggable();
			$("#todos").draggable();
		});
	</script>
</head>
<body>
	<div id="conteneur">
 
		<div id="contentHolder">
			<p>
				Quisque ac lacus. Aliquam erat volutpat. Vestibulum fringilla accumsan est. Mauris ipsum mauris, scelerisque vitae, aliquet aliquam, imperdiet sit amet, risus. Aliquam tincidunt. Vestibulum sit amet leo non dolor porttitor laoreet. Mauris convallis sagittis tortor. Integer eget purus et enim porttitor ullamcorper. Sed molestie nisi quis justo. Cras et enim. Mauris nec purus. Vestibulum vitae magna vel augue vehicula sodales. Fusce id justo. Fusce dolor nisi, tincidunt in, consectetur at, ornare rhoncus, eros.
			</p>
			<div id="centerContent">
				<p>
					Quisque ac lacus. Aliquam erat volutpat. Vestibulum fringilla accumsan est. Mauris ipsum mauris, scelerisque vitae, aliquet aliquam, imperdiet sit amet, risus. Aliquam tincidunt. Vestibulum sit amet leo non dolor porttitor laoreet. Mauris convallis sagittis tortor. Integer eget purus et enim porttitor ullamcorper. Sed molestie nisi quis justo. Cras et enim. Mauris nec purus. Vestibulum vitae magna vel augue vehicula sodales. Fusce id justo. Fusce dolor nisi, tincidunt in, consectetur at, ornare rhoncus, eros.
				</p>
				<div id="todos">
					<p>
						Quisque ac lacus. Aliquam erat volutpat. Vestibulum fringilla accumsan est. Mauris ipsum mauris, scelerisque vitae, aliquet aliquam, imperdiet sit amet, risus. Aliquam tincidunt. Vestibulum sit amet leo non dolor porttitor laoreet. Mauris convallis sagittis tortor. Integer eget purus et enim porttitor ullamcorper. Sed molestie nisi quis justo. Cras et enim. Mauris nec purus. Vestibulum vitae magna vel augue vehicula sodales. Fusce id justo. Fusce dolor nisi, tincidunt in, consectetur at, ornare rhoncus, eros.
					</p>
					<ul>
						<li>drag</li>
					</ul>
				</div>
			</div>
		</div>
 
	</div>
</body>  
</html>

Merci pour ta reponse danielhagnoul!!

En fait apres avoir fait beaucoup de recherche je sais du moins maintenant la cause du probleme!!

Dans ma structure :

Code:

1
2
3
4
5
6
7
8
9
 
   <div id = "tabContent">
     <div id = "contentHolder">     
          <div id = "todos">
                  le contenu du todos
                  <ul><li>drag</li></ul>
          </div>
     </div>
 </div>

la div #todos est genere par une manipulation Ajax ; je m'explique .

J'ai fais un Tab menu qui affiche des templates html :
Ajax :

Code:

1
2
3
4
5
6
 
         var Tabs = {
		'Desktop'       : 'pages/subpages/desktop.html',
		'Project'         : 'pages/subpages/project.html',
		'Extras'    : 'pages/subpages/extras.html',
	}

lorsqu'on clique sur la Tab desktop il importe dans #contentHolder le contenu du desktop.html.

Desktop.html

Code:

1
2
3
4
5
 
        <div id = "todos">
                  le contenu du todos
                  <ul><li>drag</li></ul>
          </div>

j'ai desactivé la creation des Tabs avec ajax et draggable a fonctionné, avec creation des Tabs ca ne fonctionne pas.

Tabs createur(bout de code)

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
      	// Definition d'un array contenant le text des Tabs et les pages AJAX
	var Tabs = {
		'Desktop'       : 'pages/subpages/desktop.phtml',
		'Project'         : 'pages/subpages/project.phtml',
		'Extras'    : 'pages/subpages/extras.html',
	}
 
	// Les couleurs disponibles pour les Tabs
	var colors = ['blue','green','red','orange'];
 
	// La couleur au dessus des Tabs lorsqu'elles sont actives
	var topLineColor = {
		blue:'lightblue',
		green:'lightgreen',
		red:'red',
		orange:'orange'
	}
 
        // Loop a travers l'array Tabs
	var z=0;
	$.each(Tabs,function(i,j){
		// Creation sequentielle des tabs en assignang une couleur
		var tmp = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+ i +' <span class="t_left" /><span class="t_right" /></a></li>');
 
		// Attribution des pages pour chaque href
		tmp.find('a').data('page', j);
 
		// Ajout des tabs crees au conteneur UL
		$('ul.tabContainer').append(tmp);
	})
 
        // Mise en Cache des Tabs dans des variables pour une meilleure Performance
        var the_tabs = $('.tab');
 
        the_tabs.click(
        function(e){
 
            var element = $(this); //"this" est le Tab clique
 
            // Si le Tab est actuellement actif, return false and exit
            if(element.find('#overLine').length) return false;
 
            // Detection de la couleur du tab
            var bg = element.attr('class').replace('tab ', '');
 
            // removing the line
            $('#overLine').remove();
 
            // Creation d'un nouvel element '
            $('<div>', {
                id:'overLine',
                css:{
                    display: 'none',
                    width:element.outerWidth()-2,
                    background:topLineColor[bg] || 'white'
                }}).appendTo(element).fadeIn('slow');
 
            // Controle si les Pages AJAX captures ont ete mises en cache
            if(!element.data('cache'))
            {
                // Si aucune cache n'est present, presente l'image gif preloader  et execute  la requete AJAX
 
                $('#contentHolder') .html('<img src="global/img/loading/loading43.gif" width="114" height="117" class="preloader" />');
               $.get(element.data('page'), function(msg){
                    $('#contentHolder').html(msg);
                    element.data('cache', msg)
                });
            }
            else $('#contentHolder').html(element.data('cache'));
            e.preventDefault();
 
        })
        the_tabs.eq(0).click();

je me demandes bien porquoi!! Quelqu'un a t-il une idee?:(

plus precisement le probleme viendrais deja des l'avenement du click sur les Onglets(tabs).

si dans mon code js je supprime la ligne :

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
 
    var the_tabs = $('.tab');
 
        the_tabs.click(
        function(e){
 
            var element = $(this); //"this" est le Tab clique
 
           ...
 
            // Controle si les Pages AJAX captures ont ete mises en cache
            if(!element.data('cache'))
            {
                // Si aucune cache n'est present, presente l'image gif preloader  et execute  la requete AJAX
 
               $('#contentHolder') .html('<img src="global/img/loading/loading43.gif" width="114" height="117" class="preloader" />');
               $.get(element.data('page'), function(msg){
                    $('#contentHolder').html(msg);
                    element.data('cache', msg)
                });
            }
            else $('#contentHolder').html(element.data('cache'));
            e.preventDefault();
 
        })

je peux faire du drag and drop avec les elements ajoutes dans #contentHolder!!!

Y a t-il ici un probleme de collision? peut etre avec la methode "html" pour charger les elements html?

Bonsoir.

Idée : rendre les éléments draggable seulement après le succès du $.get

Désolé, je n'ai pas le temps de faire des tests.
Code:

1 2 3 4 5 6 7 8 9 10 $.get(element.data('page'), function(msg){ $('#contentHolder').html(msg); element.data('cache', msg) /* * Pas les trois en même temps à cause d'IE ! */ $("#centerContent").draggable(); $("#todos").draggable(); });

02/07/2010, 14h11
3logy

Merci danielhagnoul!!

ca marche!! :ccool: