将<li> id拖放到文本输入中

Question

我搜索了互联网，我不知道如何做到这一点。我希望有类似文件列表的东西，拖放文件（<li>元素）并将其id写入文本字段。会不可能？

Answer 1

是的，可以使用jQuery UI draggable和droppable插件。您需要在页面中包含jQuery UI脚本引用。

jQuery UI CDN - http://code.jquery.com/ui/1.11.4/jquery-ui.min.js

HTML

<ul>
    <li id="li1">Li 1</li>
    <li id="li2">Li 2</li>
    <li id="li3">Li 3</li>
</ul>
<br />
<br />
<input type="text" id="textbox" />

JS

$('ul li').draggable({
    revert: true,
    helper: 'clone'
});

$("#textbox").droppable({
    drop: function (event, ui) {
        this.value = $(ui.draggable).attr('id');
    }
});

演示 http://jsfiddle.net/bxjmtdkv/2/