Dragging and dropping a <li> id to a text input

问题

I've searched the interwebs, and I'm not working out how to do that. I would like to have something like a file list, and the drag and drop a file (a <li> element) and write it's id to a text field. Would it be possible ?

回答1:

Yes it is possible using jQuery UI draggable and droppable plugins. You need to include jQuery UI script reference into your page.

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');
    }
});

Demo http://jsfiddle.net/bxjmtdkv/2/

来源：https://stackoverflow.com/questions/30669577/dragging-and-dropping-a-li-id-to-a-text-input