On Mon, Mar 16, 2009 at 1:40 AM, delphilynx <[email protected]> wrote:
>
> Hello,
>
> I am creating a website that must have hundred's of drag- and
> droppables, so for performance purposes I want to enable a Draggable
> on the mouseDown event
> (partially working) and a Droppable on the mouseUp event or
> something.
> So that they don't have to be created at once.
>
>
> <b>Question 1): </b>
> As my title suggest, I want a draggable on the OnMouseDown event.
> This
> is already working:
> <i>function createDrag(id){
> $("#"+id).draggable();
> }
> <div id="draggable" onMouseDown="createDrag('draggable');">Drag me</
> div></i>
> But when I click the dragable, it is not following the cursor
> directly. When I
> re-click the dragable, it is following. The question (1) is how to
> let
> the dragable directly following the cursor at one event, cq the
> OnMouseDown event?
>
The draggable needs to be a draggable at the time of mousedown. Maybe use
mouseover instead?
Another option would be to make the item draggable, then simulate a
mousedown. This plugin makes that quite easy:
http://jqueryjs.googlecode.com/svn/trunk/plugins/simulate/jquery.simulate.js
You'll need to guard against recursion (prevent an infinite loop) by
identifying the real browser mousedown, which will have
event.originalEvent.isTrusted == true. Also you need to make sure to destroy
it so it doesn't create it again and again:
$("#draggable").mousedown(function(event) {
if (event.originalEvent.isTrusted) {
$(this).draggable({ stop: function() { $(this).draggable("destroy"); }
});
$(this).simulate("mousedown", event.originalEvent);
}
});
>
> <b>Question 2): </b>
> How to let the droppable being created on the OnMouseUp event?
> I have trying code like this:
> <i>
> $("#droppable").droppable({
> drop: function(ev, ui) { console.dir(ui) } // nm. I use this to
> get the items in firebug
> });
> <div id="droppable" onMouseUp="createDrop('droppable');">Drop here</
> div></i>
> The difficulty about this question is, that the onMouseUp is fired
> upon the draggable that is being dragged, I think.
The droppable needs to be a droppable at the beginning of the draggable's
drag. If you truly have hundreds of droppables, and you can't get the
performance you need with out-of-the-box jQuery UI Droppables (which have
been optimized for the 100s) you may try event delegation: put all your
droppables in one container, make just that container droppable, then on the
drop determine which child was dropped on. If the cursor is over the child,
and not a draggable helper, that'll be as easy as
event.originalEvent.target. Otherwise you'll have to do size and position
calculations.
- Richard
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
