Discussion :

[fenrir0680]

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>

[danielhagnoul]

Bonsoir

Si j'ai bien compris, vous cherchez à savoir si le tag "li" en cours et le suivant sont toujours libres pour autoriser le "dropping" d'un élément "size_double_h".

$( "#UI-" + new_id ).droppable( "option", "disabled", true ); et $( "#UI-" + new_id ).droppable( "option", "disabled", false ); ne jouent pas sur la classe "droppable" mais sur la classe "ui-droppable-disabled". Si cette classe est présente, l'élément "li" n'est pas libre.

Voici l'extrait de code modifié, reste à exploiter les deux booléens.

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
				drop: function( event, ui ) {
 
					//récupération de l'id de l'élément drag
					var id_dropped = $(ui.draggable).attr('id'),
						id_widget = id_dropped.split( '-' ),
						size_h = 1,
						boolThisIsDroppable =  ! $( this ).hasClass( "ui-droppable-disabled" ),
						boolNextIsDroppable = ! $ ( this ).next().hasClass( "ui-droppable-disabled" );
 
					if ( $( ui.draggable ).hasClass('size_double_h') ){
						size_h = 2;
					}
 
					// debug
					// console.log( size_h, boolThisIsDroppable, boolNextIsDroppable );
 
					//réactivation des anciens éléments drop
                                       // suite du code à adapter

[fenrir0680]

J'en suis arrivé à la même conclusion hier soir,

J'effectue le test sur un event "over" de l'élément droppable.
Et je fait un removeClass sur l'élément draggable, pour que celui-ci ne puisse pas être dropper.

Merci pour ta réponse.