拖动项目时 JQuery 调用函数答案

【问题标题】：JQuery calling a function while you drag an item拖动项目时 JQuery 调用函数
【发布时间】：2011-08-04 18:39:55
【问题描述】：

我是 jQuery 新手。但我想在我的项目中使用它的拖放功能。当我拖动我的项目时，我想调用一个函数但不取消我的拖动。我想在运行函数后仍然持有该项目。

下面是部分代码：

 $(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();



        }
    });

当我将调用代码放在start() 中时，它会运行该函数，但也会取消拖动。基本上，我想仍然保留该项目并在后面运行该功能。我希望我已经说得够清楚了。如果没有，请询问。

【问题讨论】：

标签： jquery drag-and-drop jquery-ui-sortable containment

【解决方案1】：

虽然我从未尝试过以下方法，但我会尝试采取一些不同的方法。

为什么不直接把函数写成点击呢？

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

我不明白为什么这不起作用 - 只要您单击一个项目并拖动它，就会触发此事件。

【讨论】：

是的，你是对的。但问题是当事件被触发时，我失去了对项目的关注。我需要在事件触发后仍然保留该项目。

【解决方案2】：

这是一个旧帖子，但是，现在有一个使用“拖动”事件的解决方案：

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

当你移动 div 时会触发拖动事件。

【讨论】：

【解决方案3】：

这是你需要做的，使用拖动回调：

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

【讨论】：

【解决方案4】：

也许调用函数会导致您失去对被拖动元素的关注。

【讨论】：

这正是发生的事情。我该如何克服这个问题？我希望能够仍然拖动相同的项目。基本上我想做的是 ipad 或 iphone 风格的拖放。当您在屏幕上组织应用程序时，您可以跨页面拖放它们。所以我可以在拖动项目时调用函数 gotoNextPage() 我将能够将它放在那里。我希望我们能找到它。谢谢。