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.
精彩评论