Hello all,
I was hoping someone would be able to help me with a minor
problem I have run into with draggable helper elements...
In an effort to get familiar with jQuery and the UI library, I built
a little web app that lets users create their own "political attack
ads".
Part of the UI involves assembling sentences by dragging around
individual
words, which are then spoken by playing pre-recorded sounds.
It works like those refrigerator magnet poetry kits. Feel free to
check it out if you have a chance:
http://AttackAdGenerator.com/a/editor
I am running into a problem when a word is dragged out of the
"speech box" and back to the word list. This is how the user
removes words from a sentence. I wanted this to work like the
OS X dock in that the cloned item being dragged changes to a dust
cloud to indicate that dropping it will delete it.
I accomplished the dust cloud transition by using the "over" and "out"
events on the droppable list and adding a class to the helper that
shrinks the text and adds the dust cloud image as a background:
wordlist.droppable({
accept: '.inst',
drop: function(ev, ui) {
$(ui.draggable).remove();
},
over: function(ev, ui) {
$(ui.helper).addClass('drop-to-remove');
},
out: function(ev, ui) {
$(ui.helper).removeClass('drop-to-remove');
}
});
For most of the words, this works well but the helper for the longer
words retains its width, resulting in a dust cloud that can appear far
away from the cursor. For an example, add a long word such as
"Weapons of Mass Destruction" and drag it out by clicking on the
bottom right of the word. The cloud will appear 50+ pixels to
the left of the arrow cursor.
So what I was wondering is whether there was any way to determine
where an item being dragged is actually "anchored" to the cursor.
Is that even possible or am I missing a simple solution?
Thanks,
Mike Demers
[mike (at) 9astronauts.com]
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
