jQuery問題添加多個可丟棄文本框

Question

http://jsfiddle.net/5DCZw/2/我在網站上發現這個小提琴在這裏，我無法弄清楚如何添加多個文本框也將是可丟棄的。

Answer 1

簡單。只需添加更多的選擇你的.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)將只指向當前對象（輸入）。

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

或者帶班：

<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

樣式所有的人