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

Question

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

我为了演示目的分叉了一个现有的 fiddle 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>

不确定问题出在哪里以及如何解决。感谢任何帮助。

Answer 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

Answer 2

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

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

AngularJS, ngDraggable - input box not editable inside draggable element

drag-and-drop

input

draggable

angularjs