tags:

views:

441

answers:

1

I'm using YUI to add drag drop support to a div. It also responds to clicks. Unfortunately, the click behavior takes effect even after a drag drop operation. Here's a code snippet:

// 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);

Click is supposed to edit text, while drag drop is supposed to move the tag. However, the onclick event is firing so that text editing begins after the tag is moved.

I could code around the problem, but is there a more direct YUI way of differentiating a simple click from a drag drop?

+1  A: 

Michael,

http://ericmiraglia.com/yui/demos/ddclick.php

View the source, and let me know (ericmiraglia at yahoo dot com) if you have any further questions on this.

Modification. I will copy the code here, this way if this guy take off the code from his server people will be able to 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");
 }
})
Eric Miraglia