复杂些的工具条图标拖动?骨灰级定位专家来看看

位置对了,好像还有点问题,目前还不知道怎么处理:<!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>

解决方案 »

  1.   

    <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>
      

  2.   

    to:浪花
    "位置对了,好像还有点问题,目前还不知道怎么处理:"
    拖动的对象是<img>,不是<div>
    这两种元素在拖动时间好象有区别,所以鼠标会出现禁止符样的图标,具体没试过.
    比如:<img>是个实体,不知道有没有event.offsetX值
    定位要4个判断,不简单.to:btbtd
    庄稼需要灌溉....to:ericloot
    比较复杂.有时间看看.
    现在要处理一些别的事情,过些时间在回来看下这个