UI Draggable. Non Selection d'un id

**3logy** · 30/06/2010, 21h37

bonsoir a tous!!

j'ai une structure ressemblant a la suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou bien
-

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

je parviens a deplacer les divs!!

mais lorsque j'essaye :
-

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

**danielhagnoul** · 01/07/2010, 00h46

Bonsoir.

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**3logy** · 01/07/2010, 17h36

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

**3logy** · 01/07/2010, 22h24

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

**danielhagnoul** · 02/07/2010, 00h11

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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();	
});

**3logy** · 02/07/2010, 14h11

Merci danielhagnoul!!

ca marche!!

UI Draggable. Non Selection d'un id

jQuery

Discussions similaires

Partager

Partager