javascript - ドラッグ/ドロップからフォームの値を変更するには?

Question

以下に示すように、Web アプリにドラッグ アンド ドロップ機能があります。#contributors div にドラッグされたアイテムを、personalassessment_set3 という名前のテキスト ボックスに配置しようとしていますが、そうすることができません。何かアドバイス？

形

<p>
    <label for="personalassessment_set3">Set3</label><br />
    <input id="personalassessment_set3" name="personalassessment[set3]" type="text" />
</p>

<input type="button" value="Set Value" onclick="$('#personalassessment_set3').val( $('#contributors').val() )" />

ドラッグドロップ

<script>
function dragUser(user, event) {
    event.dataTransfer.setData('User', user.id);
}
function dropUser(target, event) {
    var user = event.dataTransfer.getData('User');
    target.appendChild(document.getElementById(user));
}
</script>

<section id="user-levels">
    <div id="unassigned" ondrop="dropUser(this, event)" ondragenter="return false" ondragover="return false">

        <a draggable="true" class="user" id="leonardo" ondragstart="dragUser(this, event)">Compensation</a>
        <a draggable="true" class="user" id="raphael" ondragstart="dragUser(this, event)">Benefits</a>


    </div>

    <div id="contributors" ondrop="dropUser(this, event)" ondragenter="return false" ondragover="return false">
        Ranking
    </div>
    <div class="clear"></div>
</section>