Ng-click 不起作用 Dragula 拖放元素

Posted 2023-02-19

【中文标题】Ng-click 不起作用 Dragula 拖放元素

【英文标题】：Ng-click not working dragula drag-drop elements

【发布时间】：2017-06-11 23:53:40

【问题描述】：

使用dragula插件（Angular 1）link

ng-click 不工作在 li 元素上移动（拖放到另一个 ul）

<ul dragula='"second-bag"'>
   <li ng-click="fun()">Item One </li>
   <li ng-click="fun()">Item Two</li>
   <li ng-click="fun()">Item Three</li>
   <li ng-click="fun()">Item Four</li>
</ul>
<ul dragula='"second-bag"'>
   <li ng-click="fun()">Item One </li>
   <li ng-click="fun()">Item Two</li>
   <li ng-click="fun()">Item Three</li>
   <li ng-click="fun()">Item Four</li>
</ul>

app.controller('ExampleCtrl', ['$scope', function ($scope) 
   $scope.fun = function()
          alert('test');
    
]);

【参考方案1】：

这可能是 dragula 的预期行为，因为为了拖动您实际点击的元素。

---

重要的部分是你为什么要监听一个拖动列表元素的点击事件？如果答案是操纵该特定元素或进行其他操作，dragula 为您提供了一系列机会。

<div dragula='"sixth-bag"'></div>
<div dragula='"sixth-bag"'></div>

app.controller('MuchExampleCtrl', ['$scope', 'dragulaService',
  function ($scope, dragulaService) 
    dragulaService.options($scope, 'sixth-bag', 
      moves: function (el, container, handle) 
        return handle.className === 'handle';
      
    );
  
]);

在此示例中，您正在更改“已处理”元素的类名。与此类似，您可以将此方法用于其他可能的结果。

链接：

http://bevacqua.github.io/angular-dragula/ https://github.com/bevacqua/dragula#optionsmoves

此外，您可能还想查看服务 ngDraggable 以获得更多“Angular1 风格”语法。

ngDraggable：https://github.com/fatlinesofcode/ngDraggable

【讨论】：

我可以从哪个包中检测元素选择吗？

你可以检测到任何你想要的包中的任何元素的处理，你应该查看文档。