JQuery calling a function while you drag an item

Question

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.

score 0 · Answer 1 · answered Oct 06 '14 at 14:06

0

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.

answered Oct 06 '14 at 14:06

Gaunt

649
8
20

score 0 · Answer 2 · answered Aug 04 '11 at 18:57

0

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.

answered Aug 04 '11 at 18:57

Capt Otis

1,250
1
12
18

yes you re right. But the thing is when the event is triggered I lose the focus on the item. I need to be still keeping the item after the event triggered. – akd Aug 04 '11 at 19:14

score 0 · Answer 3 · answered Jan 06 '22 at 22:53

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

score -1 · Answer 4 · edited Jan 21 '13 at 17:05

-1

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

edited Jan 21 '13 at 17:05

xpda

15,585
8
51
82

answered Aug 04 '11 at 18:48

ShankarSangoli

69,612
13
93
124

Thats exactly what happens. how can I overcome the problem? I would like to be able to stil drag the same item. Basically What I am trying to do is ipad or iphone style drag and drop. when you organise your apps on the screen you can drag and drop them across pages. So I can call a function gotoNextPage() while the item is dragged I will be able to drop it there. I hope we will find it out. Thanks. – akd Aug 04 '11 at 19:09

JQuery calling a function while you drag an item

4 Answers4