[mootools] drag&drop error
Het denkt dus dat ik nog aan het draggen ben ook al heb ik al dat plaatje gedropt.
Remove() genoeg uitgeprobeerd... werkt niet.
Iemand een idee?
Code (php)
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
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
<script type="text/javascript">
window.addEvent('domready', function(){
var drop = $('thuis-scroll');
//var dropFx = drop.effect('background-color', {wait: false}); // wait is needed so that to toggle the effect,
$$('.type').each(function(item){
item.addEvent('mousedown', function(e) {
e = new Event(e).stop();
var clone = this.clone()
.setStyles(this.getCoordinates()) // this returns an object with left/top/bottom/right, so its perfect
.setStyles({'opacity': 0.7, 'position': 'absolute'})
.addEvent('emptydrop', function() {
this.remove();
drop.removeEvents();
}).inject(document.body);
drop.addEvents({
'drop': function() {
drop.removeEvents();
clone.remove();
var nl13=$$('.nl-13');
var nl16=$$('.nl-16');
var nl12=$$('.nl-12');
var nl5=$$('.nl-5');
var el;
nl13.addEvent('mouseover', function(){
el = $$('#nl-13');
var newHTML = '<div>'+
'<label for="naam">Appelvlaai</label>'+
'<span>5 pt</span>'+
'</div>'+
'<ol class="products">'+
'<li>'+
'<img src="images/'+clone.name+'_klein.gif" alt="" />'+
': 1'+
'</li>'+
'</ol>';
el.setHTML(newHTML);
});
nl16.addEvent('mouseover', function(){
el = $$('#nl-16');
alert('16');
});
nl12.addEvent('mouseover', function(){
el = $$('#nl-12');
alert('12');
});
nl5.addEvent('mouseover', function(){
el = $$('#nl-5');
alert('5');
});
},
'over': function() {
//dropFx.start('98B5C1');
},
'leave': function() {
//dropFx.start('ffffff');
}
});
var drag = clone.makeDraggable({
droppables: [drop]
}); // this returns the dragged element
drag.start(e); // start the event manual
});
});
});
</script>
window.addEvent('domready', function(){
var drop = $('thuis-scroll');
//var dropFx = drop.effect('background-color', {wait: false}); // wait is needed so that to toggle the effect,
$$('.type').each(function(item){
item.addEvent('mousedown', function(e) {
e = new Event(e).stop();
var clone = this.clone()
.setStyles(this.getCoordinates()) // this returns an object with left/top/bottom/right, so its perfect
.setStyles({'opacity': 0.7, 'position': 'absolute'})
.addEvent('emptydrop', function() {
this.remove();
drop.removeEvents();
}).inject(document.body);
drop.addEvents({
'drop': function() {
drop.removeEvents();
clone.remove();
var nl13=$$('.nl-13');
var nl16=$$('.nl-16');
var nl12=$$('.nl-12');
var nl5=$$('.nl-5');
var el;
nl13.addEvent('mouseover', function(){
el = $$('#nl-13');
var newHTML = '<div>'+
'<label for="naam">Appelvlaai</label>'+
'<span>5 pt</span>'+
'</div>'+
'<ol class="products">'+
'<li>'+
'<img src="images/'+clone.name+'_klein.gif" alt="" />'+
': 1'+
'</li>'+
'</ol>';
el.setHTML(newHTML);
});
nl16.addEvent('mouseover', function(){
el = $$('#nl-16');
alert('16');
});
nl12.addEvent('mouseover', function(){
el = $$('#nl-12');
alert('12');
});
nl5.addEvent('mouseover', function(){
el = $$('#nl-5');
alert('5');
});
},
'over': function() {
//dropFx.start('98B5C1');
},
'leave': function() {
//dropFx.start('ffffff');
}
});
var drag = clone.makeDraggable({
droppables: [drop]
}); // this returns the dragged element
drag.start(e); // start the event manual
});
});
});
</script>
Je zou bijvoorbeeld nog wat extra kunnen toevoegen...
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
var dragging = false;
(...)
var drag = clone.makeDraggable({
droppables: [drop],
onStart: function(){
var dragging = true;
}
});
(...)
var drag = clone.makeDraggable({
droppables: [drop],
onStart: function(){
var dragging = true;
}
});
Dan zou je controleren met if(dragging) als er gesleept wordt of niet :)
Gewijzigd op 01/01/1970 01:00:00 door Harmen
Als ik dit namelijk doe en ik laat het plaatje los in de droparea en ik ga uit de droperea dan komt ie direct weer in onStart() (getest met een alert). Dit betekent - overigens precies het zelfde als eerst - dat mootools blijft denken dat ik het plaatje nog heb en het probleem is dus dat wanneer ik een ander item drag ik die er dus bij krijg. Heel frusterend, maar ergens vergeet ik het plaatje te verwijderen ofzo uit de cache van mootools.
Ik hoop dat iemand weet wat ik moet doen.
@Harmen
Waar het staat? Ik denk dat de code voorzich spreekt, maar zal wel ff uitleggen:
gedragged item van de class .item (regel 6 en regel 19) maakt een mouseover op de class .#nl-13 (regel 31) en verandert in de class de code en zet het plaatje erin dat is gedragged.
Dat is eigenlijk wat er gebeurd en het probleem zit 'm dus in het feit dat nadit scenario je een soort van ghostdragging hebt... Je ziet het plaatje niet maar als je je muis beweegt blijf je draggen ook al druk je je knop niet in. Als ik hierna wat anders drag en het zelfde scenario vindt plaats dan ghostdrag ik dus 2 plaatjes en hierna 3 plaatjes... Mootools verwijdert het niet uit z'n geheugen ofzo en denkt ondanks dat ik niks drag toch dat ik drag.
Kalle.
Ik denk dat het het laatste is, dat er ergens een exception wordt gegooid en opgevangen, maar dat daardoor het vermelden dat er geen plaatje meer onder de cursor zit wordt overgeslagen.
Hehehe eindelijk. Ik wist dat ik ergens een fout had gemaakt.
Ik verwijderde het event niet op de mouseOvers waardoor die bleef bestaan.
removeEvents().... altijd leuk.
Bedankt voor jullie hulp iig.
Dankzij de maker van [urk]www.wintabber.com[/url].
Gewijzigd op 01/01/1970 01:00:00 door Kalle P