Forums

i'm creating with a photo-organizing application using YUI dd modules to arrange the photos, move them from one folder to another, whatnot... simple stuff, pretty similar to the photo browser example provided by the YUI team.

i have everything working correctly when i defined the drag nodes one by one (through a Y.all().each() function), but when the page has hundreds (or thousands) of photos, it feels wrong creating that many drag objects, and in extreme cases, i can render the page, but it crashes the browser when attempting to create drag nodes for all of the photos on the page (3000+).

so... i'm attempting to rewrite the drag enabling portion of the code, to use dd-delegate instead of individual drag nodes. the issue arises when the delegate code there... the drag:start events don't seem to fire right away, not firing (working) until the second attempt.

i'm not sure if i'm assigning the dd-delegate properly, but it seems that i am... as once the drag:start fires, the drag object works exactly as expected. am i missing a parameter somewhere in there to get the drag start event to fire as soon as i start dragging? am i listening to the events that are happening incorrectly?

if i log output as each event happens, the output looks like this: (click two images to select them both, then drag from one of them.)

drag:mousedown
drag:mouseup
drag:mousedown
drag:mouseup
drag:mousedown <!-- this is a click-drag, but the drag never starts, and for that matter, the mouseup never fires either. -->
drag:mousedown <!-- for some reason, i have to click-attempt to drag twice -->
drag:start
drag:drag
drag:drag
...etc.

i've pasted sample code here http://pastie.org/1876928 with notes to tie it into the questions posed.

for reference, i've included dd-delegate, dd-constrain, dd-proxy, dd-drop, dd-scroll in my use statement.

so, it turns out that this thread title was a bit off... the delegate was working properly, and the drag was not working because of because of a css hack that was in place for the yui3-dd-draggable class. unfortunately, this css hack does not work for IE, and i'm still searching for a solution to the issue.

.content-files .yui3-dd-draggable a { pointer-events: none; }


stepping back, and attempting to create a concrete, reproducable issue...

http://jsfiddle.net/nmQtB/2/

if've taken the example on http://developer.yahoo.com/yui/3/examples/dd/delegate-plugins.html and update the example source to have a link tag around the text of each element. upon run, the drag nodes are no longer draggable when attempting to start the drag from the text of the node, which is now a link.

the solution from the http://tech.groups.yahoo.com/group/yui3/message/826 previous messageboard would be to ".removeinvalid('a')", but delegate, or the dd instance inside delegate don't have removeinvalid methods.

del.dd.removeInvalid('a');
del.removeInvalid('a');

i even tried changing the invalid attribute when the DD.Delegate was created.

var del = new Y.DD.Delegate({
container: '#demo',
nodes: 'li',
invalid: 'input, select, button, textarea'
});

i also tried as many other ways of disabling the link's functionality as i could think of (disabled="disabled", listening for click & mousedown, running e.halt();, etc...)


is there a possible solution to this issue to allow the a tag (which, in the real-world use case is even there to allow people to right click and copy the url that exists for that specific element) to not interfere with the drag functionality?