Drop une zone précise

Bonjour

Depuis quelques jours,je manipule le drag&drop.

A l'heure actuelle je peux drag n'importe l'objet dans la page.
Mon but est de le dropper uniquement dans certaine zone.

example

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
<html>
  <head>
     <script type="text/javascript" src="get-content.php"></script>
     <script type="text/javascript" src="./jquery-ui/js/jquery-1.8.2.js"></script>
     <script type="text/javascript" src="jquery-ui.js"></script>
  </head onload='Init()'>
  <body>
     <div id="drag">
	<div id="left_container">
	   <div id="general_tab">
		<ul>
		<li id="team" witdh="30px" font-family= "arial"	font-size="11px">              <a href="#team_tab">Team</a></li>
		<li id="injured"><a href="#injured_tab">Blesse</a></li>
		<li id="add"><a href="#add_tab">Add_playeur</a></li>
		</ul>
            <div id="injured_tab" >
		<!--contenu players who are injured-->
	<button id="actionPlayerInjured" onclick="AddPlayerInjured()">done!</button>
		<table >
		  <tr>
		    <td >			
			<div id="refPlayerInjured" class="drag">Darko</div> 
		   </td>
		  </tr>
		</table>
	   </div>
       </div>
 
	<!-- right container -->
	<div id="right">
	<table class="right_1">
		<td class="right_12">
			<input type="button" value="SeniorA" name="SeniorA" onclick="toggle(this, 'page1')"/>
				<div id="page1" class="page other">
				<table>
				   <tr>
					<td>
					  <table class='seniorsA'>
 
						<tr>
						<td>
						<table class='joueur' id ='0'>
						<tr><td class='enonce1'>N&ordm;</td><td class='enonce2'>Joueurs</td><td class='enonce3'>Casse Croute</td></tr>
						<tr><td class='colum'>1</td><td class='player'></td><td class='eating'><input type="checkbox" name="eating" value="checkbox"></td><td><ul class="eat"></ul></td></tr>
										<tr><td class='colum'>2</td><td class='player'></td><td class='eating'><input type="checkbox" name="eating" value="checkbox"></td><td><ul class="eat"></ul></td></tr>
										<tr><td class='colum'>3</td><td class='player'></td><td class='eating'><input type="checkbox" name="eating" value="checkbox"></td><td><ul class="eat"></ul></td></tr>
										<tr><td class='colum'>4</td><td class='player'></td><td class='eating'><input type="checkbox" name="eating" value="checkbox"></td><td><ul class="eat"></ul></td></tr>
									 	<tr><td class='colum'>5</td><td class='player'></td><td class='eating'><input type="checkbox" name="eating" value="checkbox"></td><td><ul class="eat"></ul></td></tr>
 
					</table>		
				</td>
			</tr>
		</table><!-- end table test2 -->
	</div>
  </body>
</html>

et le javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(function() {
 
	//li element
	$('#general_tab').tabs();
	$('#options').tabs();
 
  // Action on garbage
 
  $('.drag').draggable(
  	{
  		revert:'valid'
  	});
 
	$('.player').droppable({
		    accept : '.drag',
	  		drop: function(event){
                              console.log('ok');
			}
	});
 
});

j 'arrive bien a mettre l'element darko dans une cellule player , mais aussi en dehors de celle ci .
Ce que je souhaite faire , est que des que l'element drag n'est pas dans la zone drop alors retour à se place.

Bonsoir

Code:

1
2
3
$('.drag').draggable({
	revert:'invalid'
});

sans ou avec option "revert" ça ne fonctionne pas

http://jsfiddle.net/3BApv/

problème du au version de jquery