javascript - adjust position of ui droppable with dyanmic variable -
i trying make when 1 div dropped upon target div, sticks top left.. , when next 1 dropped on same target it's still @ top left , offset height of first dropped div.
once learned offset works differently in newer versions of jquery ui thought had it.. @ point i'm @ loss.
var offsetvalue = number(0); var cardheight = parseint($(".card").height()); $(document).ready(function() { $(function() { $('.card').draggable({ revert: true, disabled: false }); $('.target').droppable({ hoverclass: 'hovered', drop: function(event, ui) { if (ui.draggable.attr('id') == $(this).attr('id').substr(0, 7)) { totalattempts++; ui.draggable.draggable('option', 'revert', false); ui.draggable.position({ of: $(this), my: 'left top', at: 'left top+offsetvalue', collision:'none' }); offsetvalue = offsetvalue+cardheight;
is not possible?
$('#endgame').hide(); var totalcards = 3; var totalattempts = 0; var offsetvalue = number(0); var cardheight = parseint($(".card").height()); $(document).ready(function() { $(function() { $('.card').draggable({ revert: true, disabled: false }); $('.target').droppable({ hoverclass: 'hovered', drop: function(event, ui) { if (ui.draggable.attr('id') == $(this).attr('id').substr(0, 7)) { totalattempts++; ui.draggable.draggable('option', 'revert', false); ui.draggable.position({ of: $(this), my: 'left top', at: 'left top+offsetvalue', collision:'none' }); offsetvalue = offsetvalue+cardheight; console.log(offsetvalue); //$(this).removeclass('target'); //$(this).addclass('targetdisabled'); ui.draggable.removeclass('card'); ui.draggable.addclass('cardcorrect'); ui.draggable.draggable('disable'); if (totalattempts == totalcards) { console.log("done!"); $('#endgame').show(); $( "#endgame" ).removeclass('enddisabled'); $( "#endgame" ).addclass('endenabled'); } } } }); var randomdivs = $("div.card").get().sort(function() { return math.round(math.random()) - 0.5; }); $(randomdivs).appendto(randomdivs[0].parentnode).show(); }); });
#wrapper { width:892px; margin:0 auto } .card, .cardcorrect, .tdtargets, .target, .targetdisabled { width:280px; /*largest possible: 384px*/ } .card, .cardcorrect { height: 50px; } .tdtargets, .target { height: 550px; } .card { background-color:#c8e7d6; padding:3px; margin:10px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; cursor:move; vertical-align:top; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px } .cardcorrect { background-color:transparent; padding:3px; margin:10px; -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; cursor:default } #acttab { border-collapse:collapse } #acttab td { vertical-align:top; border:1px solid #000; text-align:left; padding:4px } #acttab th { vertical-align:top; border:1px solid #000; text-align:center; color:#fff; background-color:#2b6a47; padding:4px; font-weight:400 } .tdlabels { width:70px } .target { border:1px dotted #000; padding:3px } .hovered { background:#eeecdc } .targetdisabled { border:1px dotted #fff; padding:3px } #gametable { float:left; } #options { float:right; } #endwrapper { margin: 10px 0 0 0; height:50px; text-align:center; font-weight:bold; font-size:20px; } .enddisabled { color:#fff; } .endenabled { color:#000; text-align:center; font-weight:bold; font-size:20px; }
<div id="wrapper"> <div id="gametable"> <table id="acttab" width="100%" border="0"> <tr> <th>label a</td> <th>label b</td> <th>label c</td> </tr> <tr> <td class="tdtargets"><div class="target" id="answer1target"></div></td> <td class="tdtargets"><div class="target" id="answer2target"></div></td> <td class="tdtargets"><div class="target" id="answer3target"></div></td> </tr> </table><div id="options"> <div class="card" id="answer2"> option 1 </div> <div class="card" id="answer2"> option 2 </div> <div class="card" id="answer2"> option 3 </div> </div><!--end #options--> </div><!--end #gametable--> <div style="clear:both"></div><!--do not delete: using brute force remainder of layout plays nice--> <div id="endwrapper"> <div class="enddisabled" id="endgame"> complete! </div> <!--end #endgame: non linebreaking space here keep items on page jumping when #endgame enabled--> </div><!--end #endwrapper-->
perhaps problem @ css add more margin bottom of each element
.card, .cardcorrect, .tdtargets, .target, .targetdisabled { width:280px; /*largest possible: 384px*/ margin-bottom:25px; }
Comments
Post a Comment