Hoverclass sur la future place de mon objet

**Tanebisse** · 26/03/2013, 15h57

Bonjour,
J'ai une page sur 3 colonnes, chaque colonne est composé de plusieurs éléments d'une liste UL, chaque élément peut être déplacé dans l'une ou l'autre des colonnes. Je voudrais quand je déplace un élément que son futur emplacement ait un style css différent.
Voici le code :

Code html :

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
<html>
<head>
<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>
<script src="javascripts/drag.js" type="text/javascript"></script>
<script src="javascripts/effects.js" type="text/javascript"></script>
<LINK rel="stylesheet" type="text/css" href="css/drag.css">
</head>
<body>
	<div id="columns">
		<ul id="column1" class="column">  	  
			<li class="widget" id="legend0">    
				<div class="widget-content">  	  
					<fieldset  >
						<legend>LEGEND0</legend>
						<p>000000000000000000000000000000000000</p>
					</fieldset>	 
				</div>  
			</li>  
			<li class="widget" id="legend1">    
				<div class="widget-content">  
					<fieldset>
						<legend>LEGEND1</legend>
						<p>TOTO</p>				
					</fieldset>	 	  
				</div>  
			</li>  
			<li class="widget" id="legend2">    
				<div class="widget-content">  
					<fieldset>
						<legend>LEGEND2</legend>
						<p>MMMMMMMMMMMMMMMMM</p>
					</fieldset>		  
				</div>  
			</li>  
		</ul>  
 
		<ul id="column2" class="column">  	  
			<li class="widget" id="legend3">    
				<div class="widget-content">  	  
					<fieldset>
						<legend>LEGEND3</legend>
						<p><img src="images/fleche.jpg" id="fleche" /></p>
					</fieldset>		 
				</div>  
			</li>  
			<li class="widget" id="legend4">   
				<div class="widget-content">  
					<fieldset>
						<legend>LEGEND4</legend>
						<p>sdiofj sdiojf jdsi fjiods jf jsdo </p>
					</fieldset>	 	  
				</div>  
			</li>  
			<li class="widget" id="legend5">    
				<div class="widget-content">  
					<fieldset>
						<legend>LEGEND5</legend>
						<p>sdfjo iu sf fd f sd  dsdgfsg  sdf sdf  df sdfsdfg sd ds sdfg sd sdf sd  </p>
					</fieldset>	 	  
				</div>  
			</li>  
		</ul>  
 
		<ul id="column3" class="column">  	  
			<li class="widget" id="legend6">    
				<div class="widget-content">  	  
					<fieldset>
						<legend>LEGEND6</legend>
						<p>
							sdff pop ioouo iousdiofuhtuz by qiiohof b oyo  yotyoqyui  qgheoipncv jhyhuiyqi dghti  yqyhfui  yiqfyui fqh
							sdff pop ioouo iousdiofuhtuz by qiiohof b oyo  yotyoqyui  qgheoipncv jhyhuiyqi dghti  yqyhfui  yiqfyui fqh
							sdff pop ioouo iousdiofuhtuz by qiiohof b oyo  yotyoqyui  qgheoipncv jhyhuiyqi dghti  yqyhfui  yiqfyui fqh
							sdff pop ioouo iousdiofuhtuz by qiiohof b oyo  yotyoqyui  qgheoipncv jhyhuiyqi dghti  yqyhfui  yiqfyui fqh
						</p>
					</fieldset>	
				</div>  
			</li>  
			<li class="widget" id="legend7">    
				<div class="widget-content">  
					<fieldset>
						<legend>LEGEND7</legend>
						<p>sdiofj sdiojf jdsi fjiods jf jsdo </p>
					</fieldset> 	  
				</div>  
			</li>  
			<li class="widget" id="legend8">    
				<div class="widget-content">  
					<fieldset>
						<legend>LEGEND8</legend>
						<p>sdff pop ioouo iousdiofuhtuz by qiiohof b oyo  yotyoqyui  qgheoipncv jhyhuiyqi dghti  yqyhfui  yiqfyui fqh
							sdff pop ioouo iousdiofuhtuz by qiiohof b oyo  yotyoqyui  qgheoipncv jhyhuiyqi dghti  yqyhfui  yiqfyui fqh
							sdff pop ioouo iousdiofuhtuz by qiiohof b oyo  yotyoqyui  qgheoipncv jhyhuiyqi dghti  yqyhfui  yiqfyui fqh
							sdff pop ioouo iousdiofuhtuz by qiiohof b oyo  yotyoqyui  qgheoipncv jhyhuiyqi dghti  yqyhfui  yiqfyui fqh
						</p>
					</fieldset>		  
				</div>  
			</li>  
		</ul>  
	</div>	
</body>
	<script type="text/javascript" language="javascript" charset="utf-8"> 
        // <![CDATA[ 
                Sortable.create('column1', {containment:['column1', 'column2', 'column3'], constraint:false});
                Sortable.create('column2', {containment:['column1', 'column2', 'column3'], constraint:false});
                Sortable.create('column3', {containment:['column1', 'column2', 'column3'], constraint:false});
                Droppables.add('column1',{accept: 'widget', hoverclass:'hover',onDrop: function() { $('column1').highlight();}});
                Droppables.add('column2',{accept: 'widget', hoverclass:'hover',onDrop: function() { $('column2').highlight();}});
                Droppables.add('column3',{accept: 'widget', hoverclass:'hover',onDrop: function() { $('column3').highlight();}});
        // ]]> 
        </script> 
</html>

el le CSS

Code css :

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
/* Columns section */  
#columns ul,ol,img,p {  
	margin:0; 
	padding:0; 
	list-style:none; 
	border:none;
}  
 
#columns .column {  
    float: left;  
    width: 33%;  
	/* Min-height: */  
	min-height: 400px;  
	height: auto !important;   
	height: 400px;  
}  
 
#columns .widget {  
}  
 
#columns .widget .widget-content {  
} 
 
ul#column1.hover {
	border: 1px dashed #a00;
    background:#efefef;
}
 
ul#column2.hover {
	border: 1px dashed #a00;
    background:#efefef;
}
 
ul#column3.hover {
	border: 1px dashed #a00;
    background:#efefef;
}
 
 
.widget-placeholder { 
	border: 2px dashed #999;
}

Pour l'instant quand je déplace un objet LI ça me met la colonne entière en pointillé (peut importe le style) je voudrais que l'effet ne se fasse que pour le future emplacement de mon élément.
Nom : dragdrop1.jpg
Affichages : 62
Taille : 131,0 Ko