演示可以在sinaapp中做个静态html页面展示。第一次发帖,100分不知道多了少了。
解决方案 »
- 360浏览器窗口关闭事件
- 谁能教我下 imageflow 怎么在asp.net的网页上用啊?
- 理清apply, call的区别与联系--转载 http://www.bgscript.com/topics/thinkinginjs
- 怎样实现x = window.open('http://baidu.com?id='123''); void (x);
- 怎么才能禁止整页F5的刷新功能
- 回到页面顶部问题(十万火急)送分题
- 怎样设置IE的“Internet选项”中的”安全“选项卡中的自定义级别中的activeX属性
- 我该怎么办?
- 怎样在某个表格的单元格中添加滚动条???
- jq左右宽度可调节菜单
- extjs中的stackedcolumnchart颜色块出现重叠
- JSP文件为什么可以在IE中正常打开不可以在Chrome中打开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
float:left;
width:500px;
height:600px;
}
#left{
background-color:#F00;
}
#right{
background-color:#009;
}
input[type="button"]{
width:40px;
}
</style>
<script type="text/javascript">
function init(){
var move=false;
var divx=0;
var divy=0;
var button=document.getElementById("test");
var div=document.getElementById("right");
button.onclick=function(){
var b=button.cloneNode(true);
var x=parseInt(Math.random()*450);
var y=parseInt(Math.random()*600);
div.appendChild(b);
b.style.position="absolute";
b.style.left=500+x+"px";
b.style.top=y+"px";
}
button.onmousedown=function(){
move=true;
}
div.onmousemove=function(e){
var a=e||window.event;
divx=a.clientX;
divy=a.clientY;
}
div.onmouseup=function(){
if(move){
var b=button.cloneNode(true);
b.style.position="absolute";
b.style.left=parseInt(divx)+"px";
b.style.top=parseInt(divy)+"px";
this.appendChild(b);
}
move=false;
}
document.body.onmouseup=function(){
move=false;
}
}
window.onload=init;
</script>
</head><body>
<div id="left">
<input type="button" id="test" value="add">
</div>
<div id="right"></div>
</body>
</html>
大体这样试试
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js写一个拖动并创建一个新对象</title>
<script src="jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#left_div,#right_div{
border:1px solid red;
width:500px;height: 600px;
float: left;
}
#right_div{position: relative;}
#move_b,.scs{
position: absolute;
width:100px;height:25px;
}
#move_b{z-index: 2}
p{font-size: 12px}
</style>
</head>
<body>
<div id="left_div">
<button type="button" id="move_b">移动按钮</button>
<p style="margin-top:30px">按钮必须完全拖入右边DIV,才生成一个按钮。</p>
<p>单独点击左按钮,随机在右边生成按钮。</p>
<p style="color:red">窗口变化造成右边DIV掉下,仍保留功能!</p>
</div>
<div id="right_div"></div>
<script type="text/javascript">
$(function () {
var i=0;//生成按钮的编号
var b_offset=$("#move_b").offset();//拖动按钮原位置
$("#move_b").mousedown(function (e) {
var oe=e||window.event;
var $this = document.getElementById($(this).attr("id"));
var startX = oe.clientX - $this.offsetLeft;
var startY = oe.clientY - $this.offsetTop;
var move=false;
document.onmousemove = function (e) {
var oe = e || window.event;
$this.style.left = oe.clientX - startX + "px";
$this.style.top = oe.clientY - startY + "px";
move=true;
};
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
if(!move){
create("");
}else{
create($($this).offset());
$($this).animate(b_offset,"fast");
}
if ($this.releaseCapture)$this.releaseCapture();
};
if ($this.setCapture)$this.setCapture();
return false;
});
function create(offset){
var r_div=$("#right_div");
//分别获取按钮可生成时的最大最小坐标
var min_l=r_div.offset().left;
var min_t=r_div.offset().top;
var max_l=min_l+500-100;
var max_t=min_t+600-25;
if(""==offset){
//在指定DIV范围内随机生成按钮
$('<button type="button" style="top:'+Math.floor(Math.random()*575)+'px;left:'+Math.floor(Math.random()*400)+'px" class="scs">按钮'+i+'</button>').appendTo(r_div);
i++;
}else{
//拖动后必须在指定范围内生成按钮
if(offset.left>min_l&&offset.left<max_l&&offset.top>min_t&&offset.top<max_t){
min_t=offset.top-min_t;
min_l=offset.left-min_l;
$('<button type="button" style="top:'+min_t+'px;left:'+min_l+'px" class="scs">按钮'+i+'</button>').appendTo(r_div);
i++;
}
}
}
});
</script>
</body>
</html>