Question

http://jsfiddle.net/5DCZw/2/我在网站上发现了这个小提琴，我无法弄清楚如何添加多个也可以删除的文本框。

Answer 1

或者上课：

<input type="text" id="droppable1" class="droppable" />
<input type="text" id="droppable2" class="droppable" />
<input type="text" id="droppable3" class="droppable" />

...

$(".droppable").droppable({
    hoverClass: 'active',
    drop: function(event, ui) {
        this.value = $(ui.draggable).text();
    }
});

所以你也可以使用css

设置所有这些样式

Answer 2

$("#droppable2").droppable({
    hoverClass: 'active',
    drop: function(event, ui) {
        this.value = $(ui.draggable).text();
    }
});
$("#droppable3").droppable({
    hoverClass: 'active',
    drop: function(event, ui) {
        this.value = $(ui.draggable).text();
    }
});
$("#droppable4").droppable({
    hoverClass: 'active',
    drop: function(event, ui) {
        this.value = $(ui.draggable).text();
    }
});

依旧......

http://jsfiddle.net/5DCZw/144/

Answer 3

简单。只需在.droppable()行中添加更多选择器：

$(function() {
    $(".draggable").draggable({
        revert: true,
        helper: 'clone',
        start: function(event, ui) {
            $(this).fadeTo('fast', 0.5);
        },
        stop: function(event, ui) {
            $(this).fadeTo(0, 1);
        }
    });

    $("#droppable, #droppable2").droppable({    // ***
        hoverClass: 'active',
        drop: function(event, ui) {
            this.value = $(ui.draggable).text();
        }
    });
});

示例here。如果您使用一堆输入，我建议添加一个类，因为使用$(this)只会指向当前对象（输入）。

jQuery问题添加了多个可放置的文本框

3 个答案: