How Do I handle an event in jQuery?

In our old system, we used YUI, but the new one is using jQuery. We have a grid of data. In the old system, on the mousedown event, we made the item draggable. The mouse stayed down, and the user dragged the item. We did this to avoid making everything draggable to preserve resources. The old code looked like:

function dragThisEntity(selfPtr,...) {

//This is the function called when a user clicks on a draggable item i开发者_JAVA技巧n a report.


var dragSpan = Dom.get('dragSpan'+refInst);  

//We now have a div that can be dragged to the calendar

calEvent = new ZMRCalendarEvent('dragSpan'+refInst);
calEvent.handleMouseDown(ev);

In jQuery, on mousedown, we call this function:

function makeDraggable(element){

   var target_id = '#' + element.id;
   //alert(target_id);
   $( target_id ).draggable({scroll:true,scrollSensitivity:100,scrollSpeed:100});

}

If the user clicks again, the span is draggable. What I need is the ability to make the user not have to click again... to continue the mouse down event as I did with the YUI line,

 calEvent.handleMouseDown(ev);

Please note - I know I can make all of them draggable on Dom ready. That's not what I'm seeking to do because there could be hundreds of them, and I would rather not use the resources if not necessary. I only want to make them draggable if the user clicks on them.

I'm not looking for the basics of the Jquery UI drag and drop. I can do that. :-) I am trying a more advanced scheme to conserve resources.

Just run the .draggable() code on DOM ready. You'll need to use a different selector, though.

$(function ()
{
    $('some selector').draggable({
        scroll:true,
        scrollSensitivity:100,
        scrollSpeed:100
    });
});

The jQuery UI .draggable() handles the mousedown/mouseup events for you.

All you need to do is call draggable on the items you want draggable when the document loads. Then, you can respond to events.

Examples are on the API page for this: http://jqueryui.com/demos/draggable/#events