Jump to content
dewinky

Vexing issue!

Recommended Posts

I have a few questions i wish to see if anyone can assist me with:1. is it possible to have javascript dynamically adjust the height or width of a cell on a drag and drop event?, would i be better off using divs instead of table elements (easier to layout with my limited css skills). 2. would i be able to dynamically rotate the image of the dominoe, depending on which side of the dominoe is played and how could i do that? would i have to code something in javascript ondrop event 3. to enable select cells to allow dominoes to be dropped on them. 4. why does a dropped image takes one an opaque color? below is an image of my shoddy work and attached is the html output

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">  <head>	<meta charset="utf-8" />	<title></title>   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />  <link rel="stylesheet" href="/resources/demos/style.css" />  <link rel="stylesheet" href="../dominoes/css/dominoes.css" type="text/css" /><!--[if IE]>  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->	<script>	function allowDrop(ev) {		ev.preventDefault();	}	function drag(ev){		ev.dataTransfer.setData("Text",ev.target.id);	}	function drop(ev)		{		ev.preventDefault();		var data=ev.dataTransfer.getData("Text");		ev.target.appendChild(document.getElementById(data));	}	</script> <script>  $(document).ready(function(){    }  );</script>  </head>  <body><div id="board" ><div id='playArea' ><table id='h1Row'><tr><td id='cell_0' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_1' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_2' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_3' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_4' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_5' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_6' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td></tr></table><table id='v1Row'><tr><td id='cell_7' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_8' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_9' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td></tr></table><table id='h2Row'><tr><td id='cell_17' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_16' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_15' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_14' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_13' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_12' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_11' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_10' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td></tr></table><table id='v2Row'><tr><td id='cell_18' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_19' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_20' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td></tr></table><table id='h3Row'><tr><td id='cell_21' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_22' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_23' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_24' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_25' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_26' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td><td id='cell_27' ondrop='drop(event)' ondragover='allowDrop(event)' class='h1Row'></td></tr></table><div id="Play2Right" ><div style="background-color: blue;" class="bones_Play2Right">55</div><div style="background-color: blue;" class="bones_Play2Right">53</div><div style="background-color: blue;" class="bones_Play2Right">41</div><div style="background-color: blue;" class="bones_Play2Right">65</div><div style="background-color: blue;" class="bones_Play2Right">11</div><div style="background-color: blue;" class="bones_Play2Right">32</div><div style="background-color: blue;" class="bones_Play2Right">51</div></div><div id="Play2Top" ><div style="background-color: red;" class="bones_Play2Top">30</div><div style="background-color: red;" class="bones_Play2Top">63</div><div style="background-color: red;" class="bones_Play2Top">64</div><div style="background-color: red;" class="bones_Play2Top">20</div><div style="background-color: red;" class="bones_Play2Top">52</div><div style="background-color: red;" class="bones_Play2Top">00</div><div style="background-color: red;" class="bones_Play2Top">54</div></div><div id="Play2Left" ><div style="background-color: green;" class="bones_Play2Left">43</div><div style="background-color: green;" class="bones_Play2Left">33</div><div style="background-color: green;" class="bones_Play2Left">31</div><div style="background-color: green;" class="bones_Play2Left">44</div><div style="background-color: green;" class="bones_Play2Left">22</div><div style="background-color: green;" class="bones_Play2Left">42</div><div style="background-color: green;" class="bones_Play2Left">40</div></div><div id="Play2Active" ><img id="img_21" draggable="true" ondragstart="drag(event)" class="bones_Play2Active" src="/dominoes/css/images/21.png" alt="21" ><img id="img_10" draggable="true" ondragstart="drag(event)" class="bones_Play2Active" src="/dominoes/css/images/10.png" alt="10" ><img id="img_66" draggable="true" ondragstart="drag(event)" class="bones_Play2Active" src="/dominoes/css/images/66.png" alt="66" ><img id="img_62" draggable="true" ondragstart="drag(event)" class="bones_Play2Active" src="/dominoes/css/images/62.png" alt="62" ><img id="img_61" draggable="true" ondragstart="drag(event)" class="bones_Play2Active" src="/dominoes/css/images/61.png" alt="61" ><img id="img_50" draggable="true" ondragstart="drag(event)" class="bones_Play2Active" src="/dominoes/css/images/50.png" alt="50" ><img id="img_60" draggable="true" ondragstart="drag(event)" class="bones_Play2Active" src="/dominoes/css/images/60.png" alt="60" ></div></div></div>   </body></html>

post-94044-0-43732000-1361541489_thumb.png

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...