このリンクにアクセスしてコードを実行してください。
http://jsfiddle.net/crisply/mQYVY/
簡単に説明すると、[ボックスを追加]ボタンをクリックすると、灰色の領域に緑色のボックスが追加されます。
<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>
このコードに加えて、もっと実装したいです。
[ Add box]ボタンをクリック => point generate random location。
[ Get Coordination]ボタンをクリック ⇒数点の座標を取得し、結果のdiv(黄色の部分)を表示します。
このような。
-座標-
x:230、y:222
x:122、y:233
x:423、y:55
x:50、y:30
...
いくつかのコンポーネントを教えてください。
本当にありがとうございました。