拖放< li> id为文本输入 [英] Dragging and dropping a <li> id to a text input

问题描述

我已经搜索了互连网，但现在还不知道该怎么做.我想要一个类似文件列表的东西，然后拖放一个文件(一个<li>元素)并将其id写入文本字段.有可能吗?

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 ?

推荐答案

是的，可以使用jQuery UI的可拖放插件.您需要在页面中包含jQuery UI脚本引用.

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

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/

这篇关于拖放< li> id为文本输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！