如何从拖放中更改表单的值?

时间:2013-04-23 15:46:32

标签: javascript jquery drag-and-drop

我的网络应用程序中有拖放功能,如下所示。我试图将拖入#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>

1 个答案:

答案 0 :(得分:0)

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

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