ondrop event fails on firefox

ondrop event fails on firefox

I'm trying to set the value of a hidden text area to the value being dropped into a visible text area that is a form field. The code is as follows:

[code]
<html>

<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename = 'client.css') }}">

    <script src=" https://code.jquery.com/jquery-2.1.3.js"></script>
   
<script type="text/javascript">
$("#textarea_id")
    .bind("dragover", false)
    .bind("dragenter", false)
    .bind("drop", function (e) {
    this.value = e.originalEvent.dataTransfer.getData("text") || e.originalEvent.dataTransfer.getData("text/plain");

    // alert(this.value);
    $('#hidden_textarea_id').val(this.value);
    alert("textarea = " + $('#textarea_id').val() + " hidden text area = " + $('#hidden_textarea_id').val());
   
    return false;
});
</script>

</head>


<body>
    <p draggable="true">This is a message to be dragged and dropped.</p>
    <form id="edit_messageform_id" onsubmit="showFields()" method="post" action="/">
        <textarea id="textarea_id" cols="50" name="l_textarea" rows="20"></textarea>
        <textarea id="hidden_textarea_id" cols="50" name="l_hidden_text_area" rows="20" style="display:none;">This should be hidden</textarea>
        <input type="submit" value="Edit Message">
    </form>
</body>

</html>
[/code]

I find it strange that it runs on jsfiddle but not in my browser. Why?