Drop sous une certaine condition
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:
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:
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> |
