angularjs拖放插件掉落问题

Posted 2023-05-08

【中文标题】angularjs拖放插件掉落问题

【英文标题】：angularjs drag and drop plugin drop issue

【发布时间】：2013-09-11 20:16:37

【问题描述】：

我在我的项目中使用了 angular-dragdrop.js 库，但我遇到了 drop 回调函数的问题。所有其他回调函数都在工作。我多次调试我的代码但找不到答案， 有人遇到过这个问题吗？

这是我的html和js代码：

HTML：

<li class="li-draggable" data-drag="true"
           jqyoui-draggable="animate: true, 
                              placeholder: 'keep', 
                              onStart: 'startCallback', 
                              onStop: 'stopCallback',
                              onDrag: 'dragCallback'"
           data-jqyoui-options="snap: true, cursor: 'move', revert: 'invalid', helper: 'clone'">
           <a>Text <i class="icon-pencil pull-right"></i></a>
</li>
<div class="dummyCell" data-drop="true"
             jqyoui-droppable="multiple: true,
                               onDrop: 'dropCallback',
                               onOver: 'overCallback',
                               onOut: 'outCallback'"
             data-jqyoui-options="hoverClass: 'hoverClass'"></div>

JS：

$scope.startCallback = function(event, ui) 
    console.log('You started draggin');
;

$scope.stopCallback = function(event, ui) 
    console.log('Why did you stop draggin me?');
;

$scope.dragCallback = function(event, ui) 
    console.log('hey, look I`m flying');
;

$scope.dropCallback = function(event, ui) 
    console.log('hey, doneeeeeee');
;

$scope.overCallback = function(event, ui) 
    console.log('Look, I`m over you');
;

$scope.outCallback = function(event, ui) 
    console.log('I`m not, hehe');
;

任何帮助将不胜感激。谢谢。

更新：

删除时我在控制台中没有收到任何错误：

【参考方案1】：

您正在寻找的答案：ngModel 是必需的。故障排除详情如下...

您的选项组合引发了一些奇怪的错误Syntax Error: Token '=' implies assignment but [undefined ] can not be assigned to at column 11 of the expression [undefined = __dragItem] starting at [= __dragItem].http://jsfiddle.net/RWgX9/

从一个新的例子开始，onDrop 确实有效：http://jsfiddle.net/HsNRS/

如果你把它分解成空，它仍然会抛出错误：http://jsfiddle.net/RWgX9/1/

我认为ngModel 可能是必需的，因为一旦添加它，错误就会消失：http://jsfiddle.net/RWgX9/2/

并将其添加回您的原始代码，它现在似乎可以工作：http://jsfiddle.net/RWgX9/3/

照常工作，我在控制台中看到hey, doneeeeeee...不过不确定您对 UI 的目标是什么。

【讨论】：

天哪，它成功了dddddd...我不知道如何感谢您，先生。很奇怪，我在放置时没有收到任何错误。查看我的问题，我发布了控制台的快照，没有任何错误。非常感谢。

这意味着即使我没有将任何模型绑定到我的列表中，我仍然需要声明虚拟模型？

是的，似乎需要 ngModel，这有点奇怪。

我花了 2 个小时调试才到这里。谢谢。

【参考方案2】：

有同样的问题，但使用了 ng-model。我花了几个小时才意识到，出于某种原因，我使用的是旧的 Angular 版本（1.0.1），这就是 onDrop 不起作用而 onDrag 起作用的原因。也许这对某人有用。