JqueryUI，多个ID和其他关于droppable的语句，如何使它们工作？

Question

I have a interface where I have 3 cards, that when dragged on a board individually change something about the view on the website. Its meant as a high fidelity prototype mock up.

I can however not get more than one card to work as intended. I cannot see why it does not work, Ive tried with multiple functions and now multiple else if statements, nothing works as intended

The HTML looks like this;

<div class="cholder">
    <div class="card" id="1">
        <div class="cardid">TURN ON LIGHTS</div>
    </div>
    <div class="card" id="2">
        <div class="cardid">TURN ON TV</div>
    </div>
    <div class="card" id="3">
        <div class="cardid">OPEN DOOR</div>
    </div>
</div>

and the jquery as this;

$(".card").draggable({
    revert: function (event, ui) {

        $(this).data("uiDraggable").originalPosition = {
            top: 0,
            left: 0
        };
        return !event;
    }
});
$('.board').data('outside', 1).droppable({
    accept: '.card',
    out: function () {
        $(this).data('outside', 1);
    },
    over: function () {
        $(this).data('outside', 0);
    }
});

$('body').droppable({
    accept: '.card',
    drop: function (event, ui) {
        if ($('.board').data('outside') == 1) {
            if ($(this).is('#1')) {

                $('#my_content').toggle();
                $(".lamp").removeClass('toggled');
                $(".main").addClass('toggled').delay(1000).queue(function () {
                    $(this).removeClass("toggled");
                    $(this).dequeue();
                });
            } else if ($(this).is('#2')) {

                $('#my_content').toggle();
                $(".tv").removeClass('toggled');
                $(".main").addClass('toggled').delay(1000).queue(function () {
                    $(this).removeClass("toggled");
                    $(this).dequeue();
                });
            } else if ($(this).is('#3')) {

                $('#my_content').toggle();
                $(".door").removeClass('toggled');
                $(".main").addClass('toggled').delay(1000).queue(function () {
                    $(this).removeClass("toggled");
                    $(this).dequeue();
                });
            }
        } else if ($('.board').data('outside') == 0) {
            if ($(this).is('#1')) {

                $('#my_content').toggle();
                $(".lamp").addClass('toggled');
                $(".main").addClass('toggled').delay(1000).queue(function () {
                    $(this).removeClass("toggled");
                    $(this).dequeue();
                });;
            }
            if ($(this).is('#2')) {

                $('#my_content').toggle();
                $(".tv").addClass('toggled');
                $(".main").addClass('toggled').delay(1000).queue(function () {
                    $(this).removeClass("toggled");
                    $(this).dequeue();
                });;
            }
            if ($(this).is('#3')) {

                $('#my_content').toggle();
                $(".door").addClass('toggled');
                $(".main").addClass('toggled').delay(1000).queue(function () {
                    $(this).removeClass("toggled");
                    $(this).dequeue();
                });;
            }
        }
    }

});

JSFiddle Other Demo

Answer 1

Worked it out, my if's and accepted was wrong with the proper IDs; accept: '#1, #2, #3', --- if (ui.draggable.attr('id')=='1'

$('body').droppable({
    accept: '#1, #2, #3',
    drop: function (event, ui) {
        if ($('.board').data('outside') == 1) {
            if (ui.draggable.attr('id')=='1') {
                audioElement.play();
                $('#my_content').toggle();
                $(".lamp").removeClass('toggled');
                $(".board").addClass('toggled').delay(1000).queue(function () {
                    $(this).removeClass("toggled");
                    $(this).dequeue();
                });
            }

Answer 2

I am not pretty sure what you are trying to do exactly as the explanation and the fiddle is not clear, but from looking at your code, you can optimise it a lot better using data-attributes and the use of jQuery toggleClass

Examine your code and you will that all of your if conditions are to add some sort of class specific to each ID. Then simply save that class in a data attribute and retrieve that using jQuery. Now, all the other functions like toggling content are repeated and then you add/remove classes which can be done using the toggleClass

<div class="cholder">
    <div class="card" data-class="lamp" id="1">
        <div class="cardid">TURN ON LIGHTS</div>
    </div>
    <div class="card" data-class="tv" id="2">
        <div class="cardid">TURN ON TV</div>
    </div>
     .....
</div>

then all of your drop functions can be summarized in

$('#my_content').toggle();
$('".'+ $(this).attr('data-class') +'"').toggleClass('toggled');
 // i dont know why you need this but still you can use toggleClass
$(".main").toggleClass('toggled');