Basically, I have a DIV that I need to be draggable. The DIV contains a few things like buttons and a TEXTAREA to add notes.
Everything works perfectly fine and as expected in Chrome. However in Firefox, while the dragging works and the DIV can be moved around, it starts to drag when trying to select text in the textarea. In fact no click events work on the TEXTAREA at all and the cursor can not be repositioned. Other input elements such as buttons and droplists all work fine and are clickable and do not start the drag.
I don't have this problem in Chrome at all.
I have a fiddle that, while is just some made-up code, shows the problem here: http://jsfiddle.net/JAZ013/xutfeL9a/
HTML:
<div id="dragObj" draggable="true">
<div>Header</div>
<div><textarea>Some text to select</textarea>
</div>
JS:
$(document).ready(function(){
$('#dragObj').on('dragstart', function(event){
event.originalEvent.dataTransfer.setData('text/html', '');
});
});
Run it, and you will see that on Firefox the text in the textarea can not be selected while draggable="true". Remove the draggable="true" from the DIV and the text in the textarea can be selected but dragging obviously no longer works.
Is there anything I can do to work around this problem?
