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

Posted 2023-05-08

【中文标题】AngularJS，ngDraggable - 输入框在可拖动元素内不可编辑

【英文标题】：AngularJS, ngDraggable - input box not editable inside draggable element

【发布时间】：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>

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

【参考方案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"