angularjs - Angular ui-可排序 : Stop click event on drop in Firefox

标签 angularjs firefox angular-ui-sortable

我正在使用 angular ui-sortable通过拖放来订购元素。正在排序的项目还附加了一个点击事件。在 Firefox 中,放下其中一项会触发点击事件。在我测试过的所有其他浏览器中,它没有。

Here's一个简单的例子(检查控制台日志):

HTML

<div ng-app="app" ng-controller="ctrl as vm">
  <div ui-sortable="vm.sortableOptions" ng-model="vm.items">
    <div ng-repeat="item in vm.items">
      <a href ng-click="vm.log()">
        <div class="box"></div>
      </a>
    </div>
  </div>
</div>

CSS

.box {
  width: 100px;
  height: 100px;
  background: #ff0000;
  margin: 8px;
}

JS

angular.module('app', ['ui.sortable'])
    .controller('ctrl', [function () {
    var vm = this;

    vm.sortableOptions = {
        stop: function (e) {

      }
    }

    vm.items = [
        {},
        {},
        {},
        {}
    ];

    vm.log = function () {
        console.log('clicked');
    }
}]);

我希望这不会发生。来电 Event.preventDefault()没有像我希望的那样工作(可能是因为它是一个 Angular 点击事件)。

我当然可以在停止回调中设置某种标志(它似乎总是在点击处理程序之前触发)但我更喜欢更简洁的解决方案,因为它可能会变得有点难看。

最佳答案

使用:

vm.sortableOptions = {
    helper: 'clone'
};

它告诉模块使用克隆进行拖动,这也会禁用所有触发的事件。我检查了 Firefox,它运行良好。

关于angularjs - Angular ui-可排序 : Stop click event on drop in Firefox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35016467/

相关文章:

angular - Angular 2 的 UI 可排序插件

javascript - ng-include 用于页眉/页脚

javascript - 在 Firefox/Chrome 上使用 ion.sound 听不到任何声音

google-chrome - 浏览器检查器如何知道图像或其他资源是否属于加载失败的 css 或 js 文件?

javascript - 当输入类型为数字时,Firefox 会自动触发 focusout/blur 事件

javascript - angular ui 可排序回调

Angularjs 基于 json 数据的可排序项目和类别

javascript - 如果术语为空,则禁用实时搜索-Angular 2

angularjs - 如何在 AngularJS 中访问 c​​ookie?

angularjs - 级联 Angular 指令