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>&nbsp; <!--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

Popular posts from this blog

css - SVG using textPath a symbol not rendering in Firefox -

Java 8 + Maven Javadoc plugin: Error fetching URL -

order - Notification for user in user account opencart -