AngularJS, ngDraggable - input box not editable inside draggable element

Question

I am using an ngDraggable module, and all works fine, except that the input boxes get disabled, when they are placed inside draggable divs. I need them to remain editable, so that the user could enter text.

I forked an existing fiddle for demo purposes 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>

Not exactly sure where the problem comes from and how to fix it. Any help is appreciated.

Answer 1

I found where the issue was coming from and hope this helps someone. Inside ngDraggable module there is a preventDefault function within mouseDown event.

Just comment that line out and your input boxes inside your draggable elements in HTML will become editable.

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

---

UPD (@Andremoniy): in the latest version of ngDraggable plugin this place is located in the function onlongpress:

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