inclusion de jQuery UI Draggable

**salma.mathlouthi** · 04/01/2013, 12h48

Bonjour a tous,

Voilà je vien d'utiliser le plugin jQuery UI Draggable pour faire un module de racadrage de photo comme sur facebook le recadrage de la photo de couvertue quand on glisse la photo.

Bref j'ai testé dans un ficher independant et ca marche nikel apres plusieurs heures de concentration bref.

Mon souci est quand je veux l'inclure dans un autre fichier qui est assez chargé de code javascript html et php cela ne fonctionne plus !!!!

j'ai reverifier mon code et même l'inclusion des script je c pas ce qui cloche!!!!

voici le code dans le fichier independant

Code php :

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<?php
/*********************************************************************************
 *	Script php pour tester le racadrage de la photo de couvertue
 **********************************************************************************/
$BR="<br/>";
set_include_path(get_include_path() . PATH_SEPARATOR . realpath(dirname(__FILE__).'/..'));
 
//On définit la taille maximale des commentaires que l'on affiche
define('COMMAXSIZE', 50);
 
include_once "scripts/utils/MysqlUtils.php";
include_once "scripts/utils/UrlWritingUtils.php";
 
include_once 'libs/local.php';
include_once 'libs/config.php';
include_once 'libs/meta.php';
include_once 'scripts/utils/Common.php';
include_once 'scripts/utils/SessionUtils.php';
include_once 'scripts/bo/MemberDAO.php';
include_once 'scripts/bo/MarqueDAO.php';
include_once 'scripts/bo/ModeleDAO.php';
include_once 'scripts/vo/Member.php';
include_once 'scripts/vo/Marque.php';
include_once 'scripts/vo/Modele.php';
 
include_once("scripts/bo/CityDAO.php");
include_once("scripts/bo/DepartmentDAO.php");
 
include_once("scripts/bo/RegionDAO.php");
include_once("scripts/vo/City.php");
include_once("scripts/vo/Department.php");
 
include_once("scripts/vo/Region.php");
include_once("scripts/vo/SearchEngine.php");
include_once "scripts/bo/VitrineDAO.php";
include_once "scripts/vo/Vitrine.php";
include_once "scripts/bo/VitrineProprieteDAO.php";
include_once "scripts/vo/VitrinePropriete.php";
 
$myconnection = MysqlUtils::openConnection();
 
$memberDao = new MemberDAO($myconnection);
$vitrineDAO 		= new VitrineDAO($myconnection);
$vitrinePropDAO 	= new VitrineProprieteDAO($myconnection);
 
 
$id_membre = "370371";
 
 
$member 			= $memberDao->get($id_membre);
$vitrine			= $vitrineDAO->getVitrine($member);
$vitrineProp		= $vitrinePropDAO->getVitrinePropriete($vitrine);
 
 
 
?>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
#hovered,#slider {
	cursor: pointer;
	top: 100px;
}
 
#conteneur,#conteneur1 {
	width: 680px;
	height: 222px;
	padding: 0px;
	overflow: hidden;
	background-color: #FFFFFF;
}
</style>
<script>
    $(function() {
 
        $( "#hovered" ).draggable({ 
        	  containment : '#limitation',
        	  axis: "y",
        	  stop: function () {
        		  document.getElementById("image_top_pop").value = 343 - getPositionTop(this) ;
        		   //alert (343 - getPositionTop(this));
        		   }
        });
  });
 
    function getPositionTop(e)
    {
    	var top = 0;  	
    	/*Tant que l'on a un élément parent*/
    	while (e.offsetParent != undefined && e.offsetParent != null)
    	{
    		/*On ajoute la position de l'élément parent*/
 
    		top += e.offsetTop + (e.clientTop != null ? e.clientTop : 0);
    		e = e.offsetParent;
    	}
    	return -(top - 8);
    }
 
</script>
 
 
<style type="text/css">
textarea {
	line-height: 16px;
}
 
#sidebar {
	width: 0px;
}
 
#content {
	width: 770px;
}
 
div.entry {
	width: 385px;
	float: left;
}
</style>
 
</head>
<body style="background-color: #CCC;">
	<div id="conteneur" style="top: 343px;">
		<div id="limitation"
			style="float: center; width: 680px; height: 908px; background-color: #FFFFFF; top: -343px; position: relative;">
			<p style="margin: 0px;">
				<img id="hovered" class="ui-widget-content"
					src="../templateimages/phottest.jpg" width="680px"
					style="border: 0px; top: <?php echo $vitrineProp->image_top; ?>px;" />
			</p>
		</div>
	</div>
 
	<form id="recadrerPhotoForm" style="float: left;"  method="post" action="../test/do-position-photo.php"  >
		<input type="hidden" id="id_vitrineprop" name="id_vitrineprop" value="<?php echo  $vitrineProp->id; ?>" />
				<input type="hidden" id="id_membre" name="id_membre" value="<?php echo $member->id; ?>" />
		<input type="hidden" id="image_top_pop" name="image_top_pop" value="<?php echo  $vitrineProp->image_top; ?>" />
		<input type="submit" class="envoyer" name="enregistrer" value="Enregistrer" style="width: 120px;" />
	</form>
 
 
 
</body>
</html>
<?php MysqlUtils::closeConnection($myconnection); ?>

comme je vous ai dit ca marche nikel!

je vous explique mon but:

j'ai une page php que j'appel vitrine c'est comme un profile et au haut j'ai mis une image comme la photo de couverture dans facebook et et on survolant l'image l'user peut changer limage, la supprimer ou la recadrer.

pour le recadrage voila le mecanisme:

quand le user click sur le bouton reacdrer la page se recharge en mode recadrage= c'est a dire un voile derrier et la photo s'affiche comme ci un pop up voila le probleme est que l'image ne glisse pas

qu'elqu'un peut m'aider s'il vous plaît ???

**NoSmoking** · 04/01/2013, 17h29

Bonjour,

quand le user click sur le bouton reacdrer la page se recharge en mode recadrage= c'est a dire un voile derrier et la photo s'affiche comme ci un pop up voila le probleme est que l'image ne glisse pas

Je dirais que ton image ne reçoit visiblement pas l'événement, mais n'ayant pas compris grand chose à ton explication, ce ne sont que supputations!

**danielhagnoul** · 04/01/2013, 23h18

Bonsoir

Comme dit au message précédent, c'est nébuleux !

Juste une remarque, je vois jQuery et jQuery UI :

Code :

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

1
2
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

mais pas les styles de jQuery UI :

Code :

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

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

**salma.mathlouthi** · 07/01/2013, 14h28

bon visiblement ça na rien a voir avec tous ça comme a dit nosmoking erreur de deux div avec le mêm id

bref .

mais pas les styles de jQuery UI :

Enfait, on peut utiliser le plugin sans son css il suffit de comprendre la doc et ca dépend du plugin

enfait j'ai le même problème avec jeditable j'ai cru qu'il s'agit du même bug voilà :/ mais pour le jeditable rien a faire j'arrive pas a trouver la solution :'(((

http://www.developpez.net/forums/d12...ne-fonctionne/

inclusion de jQuery UI Draggable [UI]

jQuery

Discussions similaires

Partager

Partager