StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery, Move Point and Get Coordination
primarykey
Id
19399235
data
AcceptedAnswerId
19399656
AnswerCount
3
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-10-16T09:05:55.240
FavoriteCount
2
LastActivityDate
2013-10-17T02:13:41.430
LastEditDate
LastEditorUserId
0
OwnerUserId
2423434
ParentId
0
PostTypeId
1
Score
1
ViewCount
724
LastEditorDisplayName
text
Body
<p>please visit this link and run the code.</p> <p><a href="http://jsfiddle.net/crisply/mQYVY/" rel="nofollow">http://jsfiddle.net/crisply/mQYVY/</a></p> <p>Explain briefly, Green box is added to gray area by clicking [Add box] button.</p> <pre><code><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="../Scripts/jquery-1.8.2.js"></script> <script src="../Scripts/jquery-ui-1.8.24.js"></script> <style type="text/css"> .draggable { position: absolute; width: 10px; height: 10px; background: green; cursor: move; } #canvas { width: 500px; height: 400px; background: #ccc; position: relative; margin: 2em auto; } #results { text-align: center; background: yellow; } </style> <script type='text/javascript'> //<![CDATA[ $(function () { $(".draggable").draggable({ containment: "parent", }); $('#btn_add').click(function () { var htmlData = '<div class="draggable"></div>'; $('#canvas').append(htmlData); $(".draggable").draggable(); }); }); //]]> </script> </head> <body> <form id="form1" runat="server"> <div id="canvas"> <div class="draggable"></div> </div> <div id="results">coordination</div> <input type='button' id="btn_add" value='Add box' /> <input type='button' id="btn_getCoord" value="Get Coordination" /> </form> </body> </html> </code></pre> <p>In addition to this code, i want to implement more.</p> <ol> <li><p>Click the <strong>[Add box]</strong> button, => <strong>point generate random location</strong>.</p></li> <li><p>Click the <strong>[Get Coordination]</strong> button, =><strong>get the coordination</strong> of several points and express result div (yellow area).</p></li> </ol> <p>Like this.</p> <p><em>-Coordination- <br /> x:230, y: 222 <br /> x:122, y: 233 <br /> x:423, y:55 <br /> x:50, y:30 <br /> ...</em></p> <p>Could you please give some components for me?</p> <p>I really appreciate your help.</p>
Tags
<javascript><jquery><html><css>
Title
jQuery, Move Point and Get Coordination
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USuser2423434
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
3. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.