如何将<li>元素拖放到输入字段中

Question

我正在尝试开发一个具有以下功能的页面：

Page将有两列：一列是#origin（左列），其中包含矩形列表（代表变量），第二列是#drop（右列），其中包含可放置矩形的输入。

为了得到我想要的结果，我想到了使用两个插件：jQuery ui draggable和jQuery Tokeninput

问题是，一旦将矩形（<li>）放到输入字段中后，如何使它显示为标记。也可以使用相同的<li>元素，因此我可以在输入中输入更多文本（以完成一个公式），如果以后用户改变主意并确定变量（标记）不是他所使用的那个，还是她想要的，页面应允许他们删除标签（通过单击右上角的“ X”或将标签返回到其左列的原始位置）

有人已经做过类似的事情并且可以给我一些指导吗？还是有人对此有其他想法？

任何帮助是极大的赞赏。

PS：如果您知道其他任何可以在同一输入中组合文本和标签的标签插件，请告诉我。

Answer 1

看一下：预览

这是我第一次认真对待拖放。而且我一直走。

很多可以改进。而且效率更高，但是我已经花了3个小时了：D。

我确实学过。

$('.menu li').on('mousedown', function (e) {
    $(this).draggable({
        helper: "clone"
    }).css({
        opacity: '.7'
    });

});
var li = {}, i = 0;

function enable(x) {
    x.droppable({
        hoverClass: "drop-hover",
        drop: function (e, ui) {
            $(ui.draggable).clone().prependTo(this).draggable().addClass('special').data('i', $(this).data('i'));
            $(this).droppable('destroy')
        }
    });
};
$('.i1').each(function (u, n) {
    $(this).data('i', i);
    li[i] = $(this);
    i++;
});
$('.i1').each(function (u, i) {
    enable($(this));
});
$('.m').droppable({
    accept: ".special",
    drop: function (e, ui) {
        var x = $(ui.draggable).data();
        $(ui.draggable).remove();
        enable(li[x.i]);
    }
});


$('input[type="text"]').keypress(function (e) {
    if (e.which !== 0 && e.charCode !== 0) { // only characters
        var c = String.fromCharCode(e.keyCode | e.charCode);
        $span = $(this).siblings('span').first();
        $span.text($(this).val() + c); // the hidden span takes 
        // the value of the input
        $inputSize = $span.width();
        $(this).css("width", $inputSize); // apply width of the span to the input
    }
});