[FF, IE, Safari] Cannot select textarea content with mouse

[mjohn86]

Hi,

We have a usercase were it is not possible to mark/select text inside a textarea when using this plugin.

The markup is basically:

<div dnd-list>
  <section dnd-draggable>
    <dnd-nodrag>
      <article dnd-draggable>
        <dnd-nodrag>
          <textarea></textarea>
        </dnd-nodrag>
      </article>
    </dnd-nodrag>
  </section>
</div>

As you can see, we have nested items, which seems to work. I've seen this issue posted before, but can't seem to final the right solution? The demo (http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested) has the same issue, where users can't select the labels.

A good suggestion anyone, or should I accept that this plugin has limitations?

[thomasmost]

we also ran into the fact that text areas and text inputs are basically disabled by the dnd-no-drag directive in iOS

[Goddak]

@thomascmost - I am working on a similar issue now, I haven't tested by putting 'dnd-nodrag' directly on an input but can confirm that if each input has a parent and you apply 'dnd-nodrag' to that then inputs still work in safari (mobile) and chrome (Linux).. Plus you can use the inputs..

My markup looks like this (pug)(please excuse my poor naming with rows.rows)

ul(
  dnd-list="rows.rows
  dnd-drop="onDrop(item)"
  dnd-inserted="onInsert(callback)"
)
  li(
    ng-repeat="(index, row) in rows.rows"
    dnd-draggable="row"
    dnd-effect-allowed="move"
    dnd-dragstart="onDragstart(event)"
    dnd-callback="$apply(rows.rows.splice($index, 1))"
  )
    .column(
      ng-repeat="(key, col) in columns"
      dnd-nodrag
    )
      input(
        type="{{col.type}}
        ng-model="contentField.model[index][key]"
      )

My JS looks like this (This is in a directives linkFn)

scope.rows.rows = [{*data*}, {*data*} ,{*data*}];

vm.onDragstart = function onDragstart (event) {
  // No use for this now but could be used in the future for data
  // or preventing defaults.
  console.log('Started dragging an item', event);
}

scope.onDrop = function onDrop (dragItem) {
  // Return the drag item and dnd-list will magically add it for us.
  return dragItem;
};

vm.onInsert = function onInsert (callback) {
  // Use the call back to remove the original item.
  callback();
  // The item is now removed and has already been added by dnd-lists
}

Hopefully this might get you moving, it's taken me a good while to figure out how I needed this all setup.

[reinildo]

Hi. I'm not using angular, but I have this kind of problem with ie11, and it was because my body tag had a negative z-index. I just remove the z-index on my css and it worked.

[jaymanned]

@Goddak dnd-nodrag workaround is not working for me. Has anyone found another way around this?

[jaymanned]

Found a workaround. Replacing inputs and textareas with contenteditable spans and divs. You'll have to adjust things like readonly attributes or form submiting. You'll need to bind the ngModel controller using a directive like this one . And you can add placeholder support via CSS.. It's a little bit of work but after that, it works like a charm.

[Goddak]

@jaymanned - Glad you found a solution that worked for you. Mine is still working for me though :D