js写一个拖动并创设一个新对象
日期：2014-05-16 浏览次数：20298 次
js写一个拖动并创建一个新对象
例如一个页面下有两个div分别位于左右两边宽度各五百，高六百，在第一个div中有个button，点击botton或者拖动左边的button到右边的div，在右边的地中鼠标释放生产一个新的button，（如果是点击左边按钮则，在右边随机位置生产一个button）。在右边的button可以生产很多。ok，question over。实现吧。javascript或者jquery或者jqueryui实现均可
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
大体这样试试
------解决方案--------------------
例如一个页面下有两个div分别位于左右两边宽度各五百，高六百，在第一个div中有个button，点击botton或者拖动左边的button到右边的div，在右边的地中鼠标释放生产一个新的button，（如果是点击左边按钮则，在右边随机位置生产一个button）。在右边的button可以生产很多。ok，question over。实现吧。javascript或者jquery或者jqueryui实现均可
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
大体这样试试
------解决方案--------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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;
&nb
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
