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

【问题标题】：How to drag and drop <li> elements into input fields如何将 <li> 元素拖放到输入字段中
【发布时间】：2013-08-25 14:04:29
【问题描述】：

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

页面将有两列：一列是#origin（左列），包含一个矩形列表（代表变量），第二列是#drop（右列），包含可以删除矩形的输入开。

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

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

有没有人做过类似的事情，可以给我一些指导吗？或者有人对此有其他想法？

非常感谢任何帮助。

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

【问题讨论】：

我正在研究它jsfiddle.net/techsin/NxQvC/4 问题在于可扩展性。我会回来解决这个问题的。

标签： jquery drag-and-drop jquery-draggable jquery-tags-input

【解决方案1】：

看一看：Preview

这是我第一次认真对待拖放。我继续前进。

很多都可以改进。然而，为了提高效率，我已经花了大约 3 个小时来完成它：D。

我确实学到了 LOOOT。

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

【讨论】：

他们说我们不允许使用这些词，但我不得不说 THAAAAAAAAAAAANK YOU!!!

【解决方案2】：

试试这个小提琴DEMO

$(function () {
  $(".ui-widget-content").draggable({
        revert : function(event, ui) {

            $(this).data("ui-draggable").originalPosition = {
                top : 0,
                left : 0
            };

            return !event;

        }
    });
    $("#droppable").droppable();
});

希望对你有帮助，谢谢

【讨论】：

【解决方案3】：

我做了类似的事情。好吧，对于输入框，我没有使用<input></input>，而是使用了一些使用 contenteditable 属性的 div 元素。

我相信在 jQuery-UI 中，有一个为可放置元素注册的事件。在该事件侦听器中，放置一个代码来克隆拖动的元素并将其作为容器的子元素。用相对定位来定位。

布局或多或少是这样的

<div id="1">
 <span id="2">
  <div id="3" contenteditable="true">
     <!-- where user can type something like > 18 etc -->
  </div>
 </span>
</div>

如果用户拖动标签，则 droppable 上的 drop 事件将被触发。通过 jQuery 中的insertBefore($("#3")) 方法制作一个克隆标签（或制作一个新标签）的代码并将其放在 id="2" 下。

又一个标签来了，再做一个insertBefore($("#3"))。因此，即使我们在框中有标签，用户仍然可以输入。他/她输入的内容，我们可以得到$("#3").text();

【讨论】：

【解决方案4】：

您可以使用具有“隐藏”属性的输入，并使用另一个 div 进行通常的拖放操作：

<input type="hidden" name="valDrop" value="" id="valDrop"></input>
<div id="divDrop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

然后你在 javascript 中设置 drop 事件发生时输入的值。

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
var val=document.getElementById("valDrop");
val.value=data;
}

【讨论】：