How to detect clicks when using YUI drag and drop?
I am using YUI to add support for drag and drop on a div. It also responds to clicks. Unfortunately, the click behavior takes effect even after the drag-and-drop operation. Here's a piece of code:
// Create a DOM object for the group tag.
div = document.createElement('div');
div.className = 'group';
div.onclick = function() { beginEditName(); }
container.appendChild(div);
// Enable drag/drop for the group tag.
dragdrop = new YAHOO.util.DD(div);
dragdrop.scroll = false;
dragdrop.on('dragEvent', function(ev) { onDrag(ev); });
dragdrop.on('endDragEvent', function(ev) { onEndDrag(ev); });
dragdrop.setXConstraint(0,0);
Clicking should edit the text, while dragging and dropping should move the tag. However, the onclick event is fired so that text editing starts after the tag is moved.
I could create some code around the problem, but is there a more direct YUI way for a simple simple click to drag?
source to share
Michael
http://ericmiraglia.com/yui/demos/ddclick.php
Look at the source and let me know (ericmiraglia at yahoo dot com) if you have any further questions on this.
Modification. I'll copy the code here, so if this guy removes the code from his server, people can check the source.
var beingDragged = false;
var dd = new YAHOO.util.DD("drag");
dd.subscribe("mouseDownEvent", function(e){
beingDragged = false;
});
dd.subscribe("startDragEvent", function(e) {
beingDragged = true;
});
dd.subscribe("mouseUpEvent", function(e) {
if(beingDragged) {
alert("dragged")
} else {
alert("clicked");
}
})
source to share