CODEWITHSUNDEEP
jquery
gary
gary

Reputation: 11

jQuery question adding more than one dropable textbox

http://jsfiddle.net/5DCZw/2/ i found this fiddle on the website here, and I cant figure out how to add multiple textboxes that would also be dropable.

Upvotes: 0

Views: 279

Answers (3)

Davide Piras
Davide Piras

Reputation: 44605

Or with a class:

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

so you can also style all of them using css

Upvotes: 1

Bojangles
Bojangles

Reputation: 101483

Simple. Simply add more selectors to your .droppable() line:

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

Example here. I'd recommend adding a class if you're using a bunch of inputs, as using $(this) will only point to the current object (input).

Upvotes: 0

genesis
genesis

Reputation: 50976

$("#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();
    }
});

and so on...

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

Upvotes: 0

Related Questions