我正在尝试开发具有以下功能的页面:
页面将有两列:一列是#origin(左列),包含一个矩形列表(代表变量),第二列是#drop(右列),包含可以删除矩形的输入上。
为了得到我想要的结果,我想过使用两个插件:jquery ui draggable和jQuery Tokeninput
问题是,一旦我将一个矩形(<li>
)放入一个输入字段,我怎么能做到这一点,它显示为一个标签。使用相同的<li>
元素也没关系,所以我可以在输入中输入更多文本(以完成公式),如果以后用户改变主意并决定变量(标记)不是他或她想要的那个,页面应该允许他们删除标签(通过点击右上角的“X”或将标签返回到左栏的原始位置)
有人已经做了类似的事情,可以给我一些指导吗?或者有人对此有另一个想法?
非常感谢任何帮助。
P.S。如果您知道任何其他标记插件,允许在同一输入中组合文本和标签,请告诉我。
答案 0 :(得分:6)
看看: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
}
});
答案 1 :(得分:1)
试试这个小提琴 DEMO
$(function () {
$(".ui-widget-content").draggable({
revert : function(event, ui) {
$(this).data("ui-draggable").originalPosition = {
top : 0,
left : 0
};
return !event;
}
});
$("#droppable").droppable();
});
希望这有帮助,谢谢
答案 2 :(得分:0)
我做了类似的事情。
好吧,对于输入框,我没有使用<input></input>
,而是使用了一些使用contenteditable属性的div元素。
我相信jQuery-UI,有一个为droppable元素注册的事件。在该事件监听器中,放置一个代码来克隆拖动的元素并使其成为容器的子元素。用相对定位来定位它。
布局或多或少就像这样
<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();
答案 3 :(得分:0)
您可以使用具有“隐藏”功能的输入,并使用另一个div进行通常的拖放操作:
<input type="hidden" name="valDrop" value="" id="valDrop"></input>
<div id="divDrop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
然后在drop事件发生时设置javascript中输入的值。
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;
}