复杂些的工具条图标拖动?骨灰级定位专家来看看,该如何解决
日期：2014-05-16 浏览次数：20344 次
复杂些的工具条图标拖动?骨灰级定位专家来看看
<!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>
<title> Tool </title>
<meta http-equiv= "Content-Type " content= "text/html; charset=iso-8859-1 " />
<style type= "text/css ">
body {
margin: 0;
}
</style>
<script type= "text/javascript ">
var mX=0;
var mY=0;
var flag=0;
var h=0;
var w=0;
var tar=null;
function myTool(toolname,toolnum,isDefault,parentAppend)
{
this.name = toolname;
this.index = toolnum;
//tool img
this.t=document.createElement( 'img ');
this.t.outimg= 'http://www.csdn.net/ui/scripts/Csdn/_resources/FrameMDI/message.gif ';
this.t.overimg= 'http://www.csdn.net/ui/scripts/Csdn/_resources/FrameMDI/post.gif ';
this.t.src=isDefault?this.t.overimg:this.t.outimg;
this.t.num=this.index;
with(this.t.style)
{
border = "solid 1px #AAA ";
margin = "0px 5px 5px 0px ";
position= 'relative ';
top=2;
left=2;
}
parentAppend.appendChild(this.t);
//event
this.t.onmousedown=function()
{
flag=1;
h=event.offsetY;
w=event.offsetX;
tar=event.srcElement;
}
this.t.onmousemove=function()
{
}
this.t.onmouseover=function()
{
this.src=this.overimg;
}
this.t.onmouseout=function()
{
this.src=this.outimg;
}
}
function mousemove()
{
mX=event.clientX;
mY=event.clientY;
if(!flag)return false;
tar.style.top=mY-h-parseInt(tar.offsetTop)+ 'px ';
tar.style.left=mX-w-parseInt(tar.offsetLeft)+ 'px ';
}
function mouseup()
{flag=0;}
function pageinit()
{
var i=document.getElementById( 'icon ');
new myTool( 'tool1 ',1,false,i);
new myTool( 'tool2 ',2,false,i);
new myTool( 'tool3 ',3,false,i);
new myTool( 'tool4 ',4,false,i);
}
</script>
</head>
<body onload= "pageinit(); ">
<div style= "border:1px solid darkred;position:absolute;left:120px;top:120px;text-align:center;background:pink;width:600px;height:400px; " onmousemove= "mousemove() " onmouseup= "mouseup() ">
<div style= "width:128px;height:34px;background:lightblue;border:1px solid darkturquoise;position:absolute;top:100px;left:100px; " id= "icon ">
</div>
</div>
</body>
</html>
========================================================================
Js如何写定位
让可变换的图片在粉红色区域内随意拖动?
注:不能更改Css样式,仅通过坐标计算定位
------解决方案--------------------
位置对了,好像还有点问题,目前还不知道怎么处理:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona
<!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>
<title> Tool </title>
<meta http-equiv= "Content-Type " content= "text/html; charset=iso-8859-1 " />
<style type= "text/css ">
body {
margin: 0;
}
</style>
<script type= "text/javascript ">
var mX=0;
var mY=0;
var flag=0;
var h=0;
var w=0;
var tar=null;
function myTool(toolname,toolnum,isDefault,parentAppend)
{
this.name = toolname;
this.index = toolnum;
//tool img
this.t=document.createElement( 'img ');
this.t.outimg= 'http://www.csdn.net/ui/scripts/Csdn/_resources/FrameMDI/message.gif ';
this.t.overimg= 'http://www.csdn.net/ui/scripts/Csdn/_resources/FrameMDI/post.gif ';
this.t.src=isDefault?this.t.overimg:this.t.outimg;
this.t.num=this.index;
with(this.t.style)
{
border = "solid 1px #AAA ";
margin = "0px 5px 5px 0px ";
position= 'relative ';
top=2;
left=2;
}
parentAppend.appendChild(this.t);
//event
this.t.onmousedown=function()
{
flag=1;
h=event.offsetY;
w=event.offsetX;
tar=event.srcElement;
}
this.t.onmousemove=function()
{
}
this.t.onmouseover=function()
{
this.src=this.overimg;
}
this.t.onmouseout=function()
{
this.src=this.outimg;
}
}
function mousemove()
{
mX=event.clientX;
mY=event.clientY;
if(!flag)return false;
tar.style.top=mY-h-parseInt(tar.offsetTop)+ 'px ';
tar.style.left=mX-w-parseInt(tar.offsetLeft)+ 'px ';
}
function mouseup()
{flag=0;}
function pageinit()
{
var i=document.getElementById( 'icon ');
new myTool( 'tool1 ',1,false,i);
new myTool( 'tool2 ',2,false,i);
new myTool( 'tool3 ',3,false,i);
new myTool( 'tool4 ',4,false,i);
}
</script>
</head>
<body onload= "pageinit(); ">
<div style= "border:1px solid darkred;position:absolute;left:120px;top:120px;text-align:center;background:pink;width:600px;height:400px; " onmousemove= "mousemove() " onmouseup= "mouseup() ">
<div style= "width:128px;height:34px;background:lightblue;border:1px solid darkturquoise;position:absolute;top:100px;left:100px; " id= "icon ">
</div>
</div>
</body>
</html>
========================================================================
Js如何写定位
让可变换的图片在粉红色区域内随意拖动?
注:不能更改Css样式,仅通过坐标计算定位
------解决方案--------------------
位置对了,好像还有点问题,目前还不知道怎么处理:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
