JQuery calling a function while you drag an item

I am new to jQuery. But I would like to use its drag and drop functionality in my project. While I drag my item I would like to call a function but to not cancel my dragging. I want to be still holding the item after running the function.

Here is the part of the code:

 $(settings.columns).sortable({
        items: $sortableItems,
        connectWith: $(settings.columns),
        handle: settings.handleSelector,
        placeholder: 'widget-placeholder',
        forcePlaceholderSize: true,
        revert: 300,
        delay: 100,
        opacity: 0.8,开发者_运维知识库
        containment: 'document',
        ghosting: true,
        start: function (e,ui) {

            $(ui.helper).addClass('dragging');
    **// here is the place I would like to call a function.**
             **//example gotoPage(2);**

        },
        stop: function (e,ui) {
           $(ui.item).css({width:''}).removeClass('dragging');
           $(settings.columns).sortable('enable');
            /* Save prefs to cookie: */
           iNettuts.savePreferences();



        }
    });

When I place the calling code in start() it runs the function but cancels the dragging as well. Basically, I want to still keep the item and run the function behind. I hope I have made it clear enough. If not please do ask.

Although I have never tried the following, I would try to take a little different approach.

Why not just write the function to a click?

$(settings.columns).click(function(e,ui){
    //whatever you want to do
});

I don't see why this wouldn't work- as soon as you click an item to drag it, this event should be triggered.

its an old post, but, there is a solution now that is using the "drag" event:

http://jqueryui.com/draggable/#events

the drag event will fire while you move the div.

This is what you need to do, use the drag callback :

  $(".your-drag-drop-class").draggable({
    revert: "invalid",
    cursor: "move",
    stack: ".draggable",
    helper: 'clone',
    drag: function(event, ui) {
      $(this).addClass("draggable-inmotion");
    }
  });

Maybe calling a function is causing you to lose the focus on the element being dragged.