Jump to content

dewinky

Members
  • Content Count

    1
  • Joined

  • Last visited

Community Reputation

0 Neutral

About dewinky

  • Rank
    Newbie
  1. dewinky

    Vexing issue!

    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>
×
×
  • Create New...