Bonjour,
Voila je test actuellement jquery car je voudrai me familiariser avec pour un projet que j'ai.

J'essaye en ce moment sortable et je me demandais si dans le onBeforeStop on ne pouvais pas annuler un drag & drop, et si oui comment.

Voici mon code avec l'explication rapide de ce que je voudrais :

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
 
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; utf-8" />
		<title>Sortables demo - Interface plugin for jQuery</title>
		<script type="text/javascript" src="jQuery/jquery-1.2.6.min.js"></script>
		<script type="text/javascript" src="jQuery/interface 1.2/interface.js"></script>
		<script type="text/javascript">
			function CountClassInId(cl, objId, objTag)
			{
				var obj = document.getElementById(objId);
				var tabDivs = obj.getElementsByTagName(objTag);
 
				var counter = 0;
				i = 0;
 
				while (tabDivs[i])
				{
					if (tabDivs[i].className == cl)
					{
						counter++;
					}
 
					i++;
				}
 
				if (counter > 2)
				{
					return true;
				}
				else 
				{
					return false;
				}
			}
		</script>
	</head>
	<body>
		<div id="sort1" class="groupWrapper">
			<div id="newsFeeder" class="groupItem">
				<div class="itemHeader">Feeds</div>
				<div class="itemContent">
					<ul><li>blablabla</li></ul>
				</div>
			</div>
			<div id="news" class="groupItem">
				<div class="itemHeader">News</div>
				<div class="itemContent">		
					<ul><li>blablabla</li></ul>
				</div>
			</div>
		</div>
		<div id="sort2" class="groupWrapper">
			<div id="shop" class="groupItem">
				<div class="itemHeader">Shopping</div>
				<div class="itemContent">
					<ul><li>blablabla</li></ul>
				</div>
			</div>
		</div>
		<div id="sort3" class="groupWrapper">
			<div id="links" class="groupItem">
				<div class="itemHeader">Links</div>
				<div class="itemContent">
					<ul><li>blablabla</li></ul>
				</div>
			</div>
			<div id="images" class="groupItem">
				<div class="itemHeader">Images</div>
				<div class="itemContent">
					<ul><li>blablabla</li></ul>
				</div>
			</div>
		</div>
		<script type="text/javascript">
		$(document).ready(
			function () {
				var back;
				$('div.groupWrapper').Sortable(
					{
						accept: 'groupItem',
						helperclass: 'sortHelper',
						activeclass: 'sortableactive',
						hoverclass: 'sortablehover',
						handle: 'div.itemHeader',
						tolerance: 'pointer',
						onChange : function(ser)
						{
						},
						onStart : function()
						{
							$.iAutoscroller.start(this, document.getElementsByTagName('body'));
						},
						onBeforeStop : function()
						{
							back = CountClassInId(this.className, this.parentNode.id, 'div');
 
							if (back)
							{
								//annuler le drag & drop
							}
						}
						onStop : function()
						{
							$.iAutoscroller.stop();
						}
					}
				);
			}
		);
		</script>
	</body>
</html>
En gros je voudrais qu'on ne puisse déplacer que 2 items par 'groupWrapper'
La fonction au début, quand elle est appelée, compte le nombre d'items et retourne true ou false en fonction du nombre.

Ensuite, dans le onBeforeStop, je voudrais que si il y a déja 2 items ou plus, on annule le drag & drop de l'item qu'on avais pris.

Je ne sais pas si je suis clair dans ce que je veux ... J'espère que vous pourrez m'aider ...

Merci d'avance pour vos réponses !