复杂些的工具条图标拖动?骨灰级定位专家来看看
<!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-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.screenX;
w=event.screenY;
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.screenX;
mY=event.screenY;
if(!flag)
return false;
if(mY> =w&&mX> =h){
tar.style.top=parseInt(tar.style.pixelTop)+Math.abs(mY-w);
tar.style.left=parseInt(tar.style.pixelLeft)+Math.abs(mX-h);
}else if(mY> =w&&mX <h){
tar.style.top=parseInt(tar.style.pixelTop)+Math.abs(mY-w);
tar.style.left=parseInt(tar.style.pixelLeft)-Math.abs(h-mX);
}else if(mY <w&&mX> =h){
tar.style.top=parseInt(tar.style.pixelTop)-Math.abs(w-mY);
tar.style.left=parseInt(tar.style.pixelLeft)+Math.abs(mX-h);
}else if(mY <w&&mX <h){
tar.style.top=parseInt(tar.style.pixelTop)-Math.abs(w-mY);
tar.style.left=parseInt(tar.style.pixelLeft)-Math.abs(h-mX);
}
h=event.screenX;
w=event.screenY;
}
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>
[解决办法]
..........庄稼
[解决办法]
<script type= "text/javascript ">
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}
var iMouseDown = false;
var dragObject = null;
var curTarget = null;
function makeDraggable(item){
if(!item) return;
item.onmousedown = function(ev){
dragObject = this.parentNode;
//alert(this.parentNode.tagName);
mouseOffset = getMouseOffset(this.parentNode, ev);
return false;
}
}
function getMouseOffset(target, ev){
ev = ev || window.event;
var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
function getPosition(e){
var left = 0;
var top = 0;
while (e.offsetParent){
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
e = e.offsetParent;
}
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
return {x:left, y:top};
}
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function mouseDown(ev){
ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.onmousedown || target.getAttribute( 'DragObj ')){
return false;
}
}
function mouseUp(ev){
dragObject = null;
iMouseDown = false;
}
function mouseMove(ev){
ev = ev || window.event;
/*
We are setting target to whatever item the mouse is currently on
Firefox uses event.target here, MSIE uses event.srcElement
*/
var target = ev.target || ev.srcElement;
var mousePos = mouseCoords(ev);
if(dragObject){
dragObject.style.position = 'absolute ';
dragObject.style.top = (mousePos.y - mouseOffset.y) + "px ";
dragObject.style.left = (mousePos.x - mouseOffset.x) + "px ";
}
// track the current mouse state so we can compare against it next time
lMouseState = iMouseDown;
// this prevents items on the page from being highlighted while dragging
if(curTarget || dragObject) return false;
}
document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;
window.onload = function() {
makeDraggable(document.getElementById( '这里写要拖动层的id '));
}
</script>
[解决办法]
菜鸟帮顶
占个位置看专家的
[解决办法]
主要目的来看骨灰．