javascript - 如何通过拖放更改表单的值？

Question

我的网络应用程序中有一个拖放功能，如下所示。我正在尝试将拖入#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>

Answer 1

您正在滥用不接受任何基于 jquery 的方法或包装对象的 onclick。你应该试试这个：

<input id="test" type="button" value="Set Value" />
<script>
   $(function(){
       $('#test').on('click',function(){
          $('#personalassessment_set3').val( $('#contributors').val() )
       });
   });
</script>