Grow your CSS skills. Land your dream job.

if/else &/or switch statement

  • # December 16, 2012 at 10:12 pm

    Hi! I’m doing a drag and drop for both PC and tablet. I’m doing the animation in Adobe Edge.

    I have some problems when I drag and element over to the droppable area. I need to allow any elements (draggables) to be able to drop into any of the droppable areas and not just restrict to 1 area. I tried using the if/else statement, but I can’t seem to make it work. For example, Position 1 (droppable area) must be able to accept all the cases – case1, case2, case3 (draggables), but only 1 draggable on a droppable at any one time.

    I hope you can help me out, or atleast helping me with the if/else statement. This is a link to my folder. https://www.box.com/s/0pksqtpmqg7zae43en66


    —these are my codes, in case you can’t open the file———————–

    yepnope( { nope:[ 'js/jquery-ui-1.9.2.custom.min.js',
    'js/jquery.ui.touch-punch.min.js',
    'css/jquery-ui-1.9.2.custom.min.css' ],
    complete: init } );
    function init()
    { var stage = sym.$(“Stage”);

    //DRAGGABLE. case1 //
    var _1 = sym.$(“_1″);
    var _2 = sym.$(“_2″);
    _2.css(“position”, “absolute”);
    _2.draggable({ disabled: false });
    _2.draggable({ containment: stage });
    //for(var i=1; i< =9;i++){ _2.draggable({ snap: '.target1', snapMode: 'centre' });

    //DROPPABLE
    var position1 = sym.$(“position1″);
    position1.css(“position”, “absolute”);
    // position1.css(“left”, 375);
    // position1.css(“top”, 25);
    //position1.on( “dropout”, function( event, ui ) {
    //});
    //drop into position1 position1.droppable({ accept: “.case1″, drop: function(event, ui)
    { console.log(this.childNodes);
    var element2 = sym.$(“.Stage_position1__1Black_Eagle_id”); //Stage_position1__1Black_Eagle_id element2.show(); _2.hide();

    /*else if(_1){ var element = sym.$(“.Stage_position1__2Green_Parrot_id”); element.show(); _1.hide(); } */ }
    // adds visual when correct drops here }); //————————————————————–

    //DRAGGABLE case2, _5
    var _5 = sym.$(“_5″);
    _5.css(“position”, “absolute”);
    _5.draggable({ disabled: false });
    _5.draggable({ containment: stage });
    //for(var i=1; i< =9;i++){
    _5.draggable({ snap: ‘.target2′, snapMode: ‘corner’ });

    //DROPPABLE
    var position2 = sym.$(“position2″);
    position2.css(“position”, “absolute”);
    position2.droppable({ accept: “.case2″, drop: function(event, ui) { console.log(this.childNodes);
    var element5 = sym.$(“.Stage_position2__5Black_Snake_id”);
    element5.show(); _5.hide(); } });
    //————————————————————–

    //case3. _7 //DRAGGABLE
    var _7 = sym.$(“_7″);
    _7.css(“position”, “absolute”);
    _7.draggable({ disabled: false });
    _7.draggable({ containment: stage });
    _7.draggable({ snap: ‘.target3′, snapMode: ‘corner’ });

    //DROPPABLE
    var position3 = sym.$(“position3″);
    position3.css(“position”, “absolute”);
    position3.droppable({ accept: “.case3″, drop: function(event, ui) { console.log(this.childNodes);
    var element7 = sym.$(“.Stage_position3__7Green_Praying_Mantis_id”);
    element7.show();
    _7.hide(); } });
    // end of codes } /————————————————————————————————————— I’ve only included excerpt of the codes to let you have an idea of it. Thank you so much for your time.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".