I'm trying to drag content into a textarea using prototype/scriptaculous, edit the text area, and then continue to drag and drop some more content. Dragging and dropping works fine, but as soon as I edit the content in the textarea, dropping ceases working.
I wrenched it down into a test case
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>dragdrop testcase</title>
<script type="text/javascript" src="/shoppingZend/public/javascript/scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="/shoppingZend/public/javascript/scriptaculous/src/scriptaculous.js?load=effects,dragdrop,controls"></script>
</head>
<body>
<div id="content_1" class="drag">Content 1</div>
<div id="content_2" class="drag">Content 2</div>
<div id="content_3" class="drag">Content 3</div>
<textarea id="drop"></textarea>
<script>
new Draggable('content_1', {
revert: true
});
new Draggable('content_2', {
revert: true
});
new Draggable('content_3', {
revert: true
});
Droppables.add(
'drop', {
onDrop: function(dragged, dropped, event) {
dropped.innerHTML += dragged.innerHTML;
}
}
);
</script>
</body>
</html>
Just in case of it being a browser problem (which I doubt it to be): I'm only using Firefox on Linux, it's a very private site and does not need to work anywhere else.
Any idea where I could start debugging?
PrototypeJS handles textarea as a form element. All form elements have a value property (ex. select, input, textarea). So, try Geek Num 88 suggestion:
dropped.value += dragged.innerHTML;
I tried in Chrome, FF and IE and it seems to work correctly.
Domus71