AngularJS，ngDraggable - 输入框在可拖动元素内不可编辑答案

【问题标题】：AngularJS, ngDraggable - input box not editable inside draggable elementAngularJS，ngDraggable - 输入框在可拖动元素内不可编辑
【发布时间】：2017-06-29 10:40:56
【问题描述】：

我正在使用 ngDraggable 模块，一切正常，除了输入框被禁用时，它们被放置在可拖动的 div 中。我需要它们保持可编辑状态，以便用户可以输入文本。

我为演示目的分叉了一个现有的小提琴 http://jsfiddle.net/kkyk0j4x/10/

<div ng-app="test" ng-controller="testCtrl">
<div id="container">
    <div class="shape" ng-draggable='dragOptions'>
      <input type="text" /><!--THIS IS NOT EDITABLE-->
    </div>
    <br / >
    <br / >
    <br / >
    <input type="text"><!--THIS IS EDITABLE-->
</div>

不确定问题出在哪里以及如何解决。任何帮助表示赞赏。

【问题讨论】：

标签： angularjs input drag-and-drop draggable

【解决方案1】：

我找到了问题的来源，希望这对某人有所帮助。在 ngDraggable 模块中，mouseDown 事件中有一个 preventDefault 函数。

只需注释掉该行，您在 HTML 中可拖动元素内的输入框将变为可编辑。

// Bind mousedown event
elem.on('mousedown', function (e) {
    //e.preventDefault(); 
.......

UPD（@Andremoniy）：在最新版本的ngDraggable插件中这个地方位于函数onlongpress：

            var onlongpress = function(evt) {
                if(! _dragEnabled)return;
                //evt.preventDefault();  <---- this line

【讨论】：

在最新版本的库中，需要在函数onlongpress中进行注释。
注释掉这一行将引入在简单点击时触发拖动事件的问题。查看正确答案link 获取最新版本的 ngDraggable

【解决方案2】：

使用最新版本的 ngDraggable，您必须在包含可编辑元素或需要其他鼠标交互的元素上定义 ng-cancel-drag="true"

【讨论】：