Bonjour,
Je suis en train de réaliser un drag 'n drop avec jQuery UI.
Il doit pouvoir réaliser plusieurs choses:
- Drag n drop d'élément sur une grille ->OK
- Les élément drag peuvent avoir plusieurs taille. ->OK
- 2 éléments drag ne peuvent pas se superposer sur un element drop

Sur la troisième partie je sèche un peu. Le code ci-dessous est partiellement fonctionnel.
Je ne peux pas superposer des éléments single sur un élément double, en revanche le contaire n'est pas vrai.
Je peux poser un élément double sur un single.

Pour que deux élements draggable ne se superpose pas, je désactive l'élément drop avec :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
 
	.droppable( "option", "disabled", true );
Je voudrais que lorsque je drop un élément double, la fonction vérifie si l'élément li et li+1 sont droppable.
Si quelqu'un à une idée?

PS:
je développe cette fonction pour un blog sous wordpress, à la place du $ on trouve le jQuery.

Voici une partie de mon 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
98
99
100
101
102
 
<div id="1" class="draggable single">1</div>
<div id="2" class="draggable size_double_h">2</div>
<div id="3" class="draggable single">3</div>
 
<div id="UI-droppable">
	<ul>
		<li id="UI-1" class="droppable">
			accept: '#draggable'
		</li>
		<li id="UI-2" class="droppable">
			accept: '#draggable'
		</li>
		<li id="UI-3" class="droppable">
			accept: '#draggable'
		</li>
		<li id="UI-4" class="droppable">
			accept: '#draggable'
		</li>
		<li id="UI-5" class="droppable">
			accept: '#draggable'
		</li>
		<li id="UI-6" class="droppable">
			accept: '#draggable'
		</li>
		<li id="UI-7" class="droppable">
			accept: '#draggable'
		</li>
		<li id="UI-8" class="droppable">
			accept: '#draggable'
		</li>
		<li id="UI-9" class="droppable">
			accept: '#draggable'
		</li>
		<li id="UI-10" class="droppable">
			accept: '#draggable'
		</li>
		<li id="UI-11" class="droppable">
			accept: '#draggable'
		</li>
		<li id="UI-12" class="droppable">
			accept: '#draggable'
		</li>
	</ul>
<div/>
 
<script>
	var id_droppenOn = new Array;
	id_droppenOn['1'] = 0;
	id_droppenOn['2'] = 0;
	id_droppenOn['3'] = 0;
 
	jQuery( 'div.draggable' ).draggable({
			snap: ".droppable",
			snapMode: "inner",
			revert: "invalid",
			opacity: 0.75,
			cursor: "move",
			zIndex: 1000,
			containment: "#UI-droppable"
		});
 
	jQuery( "li.droppable" ).droppable({
		accept: ".draggable",
		tolerance: "intersect",
		activeClass: "droppable-active",
		hoverClass: "droppable-hover",
		drop: function( event, ui ) {
 
			//récupération de l'id de l'élément drag
			var id_dropped = jQuery(ui.draggable).attr('id');
			id_widget = id_dropped.split( '-' );
			if ( jQuery( ui.draggable ).hasClass('size_double_h')) { var size_h = 2; }
			else { var size_h = 1; }
 
			//réactivation des anciens éléments drop
			if ( document.getElementById ( id_droppenOn[id_dropped] ) ) {
				for ( i = 0; i < size_h; i++) {
					var id_split = id_droppenOn[id_dropped].split('-');
					var new_id = parseInt ( id_split[1] ) + i;
					jQuery( "#UI-" + new_id ).droppable( "option", "disabled", false );
				}
			}
 
			//Désactive la fonction droppable après un drag 'n drop
			for ( i = 0; i < size_h; i++) {
				var id_split = jQuery( this ).attr('id').split('-');
				var new_id = parseInt ( id_split[1] ) + i;
				jQuery( "#UI-" + new_id ).droppable( "option", "disabled", true );
			}
 
 
			//fixe la position d'un élément draggable sur un élément droppable
			var dropped = ui.draggable;
			var droppedOn = jQuery(this);
			jQuery(dropped).detach().css({top: -20,left: -5}).appendTo(droppedOn);
 
			//récupération de l'id de l'élément drag
			id_droppenOn[id_dropped] = droppedOn.attr('id');
		}
	});
</script>