Hi,
I decided to open a new thread (this is the old one:
http://groups.google.com/group/prototype-scriptaculous/t/303d050dd9c07329),
because it is a general question how to use the Sortable of
script.aculo.us correctly.
Simple HTML-Code:
<ul id="list">
<li id="item1"><label><input type="checkbox" /> Item 1</label></li>
<li id="item2"><label><input type="checkbox" /> Item 2</label></li>
</ul>
Javascript:
Sortable.create('list');
Works in all browsers. I just have a problem with Gecko and WebKit.
Using the drag&drop by clicking on the labels also changes the state
of the checkbox (checked/unchecked).
I tried a lot of different thinks to avoid that behaviour. I think it
would be the best solution to stop the whole event, after an item was
dropped.
Sortable.create offers two callbacks: onChange and onUpdate:
onChange is called whenever the an item changes a position during the
dragging. It has the item thats being dragged as a parameter.
onUpdate is called when the item is actually dropped and the list has
a new order. It has the whole list as parameter. Unfortunately I don't
have an event object here, so I could work with that.
What I did: I saved the checkbox that is dragged within onChange:
onChange: function(element) {
this.checkbox = element.select('input')[0];
}
Within onUpdate I set this checkbox disabled. So the automatic click
on it would have no effect:
onUpdate: function(element) {
if (Prototype.Browser.WebKit || Prototype.Browser.Gecko) {
this.checkbox.disable();
}
}
Now I just need to add another click handler for the label and list to
enable the checkbox:
onClick = function(evt) {
if (this.checkbox) {
this.checkbox.enable();
evt.stop();
}
};
$$('#list label').invoke('observe', 'click', onClick.bind(this));
$$('#list li').invoke('observe', 'click', onClick.bind(this));
This works now really good, just one thing keeps bugging me.
When I press the mousebutton on a label to start dragging and
releasing it not on the label, but somewhere else, the click event is
not fired, so the checkbox remains disabled. This also happens the
other way round: Start dragging on the list-item and releasing
dropping it while the mouse is over the label.
I could add even another mouse event handlers to the whole list:
mouse = function(evt) {
if (this.checkbox) {
this.checkbox.enable();
}
};
$('list').observe('mouseover', mouse.bind(this)).observe('mousemove',
mouse.bind(this));
If you are not moving your mouse you can still see the disabled
checkbox.
I have no further ideas. I hope you can help me out.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
