Как да плъзгате и пускате ‹li› елементи в полетата за въвеждане

Разгледайте: Преглед

Това е първият ми път, когато се занимавам сериозно с дроп и драг. И продължих.

Много може да се подобри. И стана по-ефективен обаче, вече съм прекарал около 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
    }
});

Опитайте тази цигулка ДЕМО

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

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

            return !event;

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

Надявам се това да помогне, благодаря

Аз направих нещо подобно. Е, за полетата за въвеждане не използвах <input></input>, но с някои елементи div, използващи атрибута contenteditable.

Вярвам в 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. Направете код, който клонира етикета (или направете нов) и го поставете под id="2" чрез insertBefore($("#3")) метод в jQuery.

Идва друг етикет, просто направете още insertBefore($("#3")). Така че, дори когато имаме етикети в полето, потребителят все още може да въвежда. Това, което той/тя пише, можем да го получим като $("#3").text();

Можете да използвате вход с приличието „скрит“ и да използвате друг 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;
}