请访问此链接并运行代码。
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>
除了这段代码,我想实现更多。
点击 [添加框] 按钮,=&gt; 点生成随机位置。
点击 [获取协调] 按钮, =&gt; 得到几个点的协调并表达结果div(黄色区域)。
喜欢这个。
-Coordination-
x:230,y:222
x:122,y:233
x:423,y:55
x:50,y:30
...
你能为我提供一些组件吗?
我非常感谢你的帮助。
答案 0 :(得分:1)
此处的实施:http://jsfiddle.net/mQYVY/10/
第一部分:
var htmlData = $('<div class="draggable"></div>');
var x = Math.floor(Math.random()*501);
var y = Math.floor(Math.random()*401);
htmlData.css({'left': x+'px', 'top': y+'px'});
第二部分:
$('#btn_getCoord').click(function() {
var output = '-Coordination-';
$('.draggable').each(function() {
output += '<br />x: ' + $(this).position().left + ', y: ' + $(this).position().top;
});
$('#results').html(output);
});
答案 1 :(得分:1)
$(function () {
// This run when the document is ready, so it only effect on first point, it won't effect on new points automatically.
$(".draggable").draggable({
containment: "parent",
});
$('#btn_add').click(function () {
var top = 1 + Math.floor(Math.random() * 390);
var left = 1 + Math.floor(Math.random() * 490);
var htmlData = '<div class="draggable" style="top:'+top+'px;left:'+left+'px;"></div>';
$('.canvas').append(htmlData);
// You need limit draggable containment for new point again.
$(".draggable").draggable({containment: "parent"});
});
$('#btn_getCoord').click(function () {
$('#results').html('-Coordination-');
$('.draggable').each(function(){
var cordInfo = '<br />x: '+$(this).position().left+', y: '+$(this).position().top;
$('#results').append(cordInfo);
});
});
});
答案 2 :(得分:0)
第一部分更新了JS:
$(function () {
$(".draggable").draggable({
containment: "parent",
});
$('#btn_add').click(function () {
var top = 1 + Math.floor(Math.random() * 390);
var left = 1 + Math.floor(Math.random() * 490);
var htmlData = '<div class="draggable" style="top:'+top+'px;left:'+left+'px;"></div>';
$('.canvas').append(htmlData);
$(".draggable").draggable();
});
});
对于第二部分,请点击此链接:http://api.jquery.com/offset/