Question

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 in 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.

Answer 1

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