求拖拽技术JS代码 ███大家帮忙

<html>
<head>
<style type="text/css">
#plane1 {position:absolute; left:90; top:70; width:121; z-index:0}
#plane2 {position:absolute; left:50; top:50; width:118; z-index:0}
</style>
<title>可以拖动的图片</title>
</head><body onLoad="init()"><SCRIPT LANGUAGE="JavaScript">
var isNav, isIE //检测浏览器版本
if (parseInt(navigator.appVersion) >= 4) {
if (navigator.appName == "Netscape") {
isNav = true
} else {
isIE = true
}
}//设定对象z-Index属性的实用函数
function setZIndex(obj, zOrder) {
obj.zIndex = zOrder
}
//这个函数将指定物体定位到指定坐标处。
function shiftTo(obj, x, y) {
if (isNav) {
obj.moveTo(x,y)
} else {
obj.pixelLeft = x
obj.pixelTop = y
}
}var selectedObj
var offsetX, offsetY//寻找被点击的对象
function setSelectedElem(evt) {
if (isNav) { //NS浏览器的处理
var testObj
var clickX = evt.pageX
var clickY = evt.pageY
for (var i = document.layers.length - 1; i >= 0; i--) { //遍历页面中的对象
testObj = document.layers[i] //当前对象
if ((clickX > testObj.left) && //如果鼠标在当前对象范围内
(clickX < testObj.left + testObj.clip.width) &&
(clickY > testObj.top) &&
(clickY < testObj.top + testObj.clip.height)) {
selectedObj = testObj //则记录这个对象
setZIndex(selectedObj, 100) //将其置于最前
return //返回
}
}
} else { //IE浏览器的处理
var imgObj = window.event.srcElement //触发事件的对象
if (imgObj.parentElement.id.indexOf("plane") != -1) { //判断这个对象是不是预先定义需要被拖动的那个
selectedObj = imgObj.parentElement.style //记录这个对象
setZIndex(selectedObj,100) //将其调整到最上层
return //返回
}
}
//如果点击的对象不是需要拖动的，则会执行到这里
selectedObj = null //记录一个空对象
return
}
//拖动一个对象
function dragIt(evt) {
if (selectedObj) { //如果有被操作对象
if (isNav) { //如果浏览器是NS
shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY)) //将对象移动到鼠标的位置
} else { //如果是IE
shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))
return false //返回false值，阻止接下来的其他处理点击的过程。
}
}
}
//鼠标按下时的处理
function engage(evt) { /*记录鼠标坐标*/
setSelectedElem(evt)
if (selectedObj) {
if (isNav) {
offsetX = evt.pageX - selectedObj.left
offsetY = evt.pageY - selectedObj.top
} else {
offsetX = window.event.offsetX
offsetY = window.event.offsetY
}
}
return false
}
//处理鼠标释放
function release(evt) {
if (selectedObj) {
setZIndex(selectedObj, 0) //将被拖动对象置后
selectedObj = null //清除记录的对象
}
}
//为NS设定事件捕获列表
function setNavEventCapture() {
if (isNav) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}
}
//在页面装入的时候初始化事件捕获过程
function init() {
if (isNav) {
setNavEventCapture()
}
document.onmousedown = engage
document.onmousemove = dragIt
document.onmouseup = release
}
</SCRIPT> <DIV ID=plane1><IMG NAME="planePic1" SRC="images/move.gif" BORDER=0></DIV>
<DIV ID=plane2><IMG NAME="planePic1" SRC="images/move.gif" BORDER=0></DIV>
<p><b>页面中的这两颗星星可以用鼠标拖动。</b></p>
</body>
</html>

顶一下吧我觉得这样的需求太BT……不能客户想要什么我们就做什么
实现左击放大，右击缩小就OK了

楼上的好牛啊,写了那么多
看看我这个好不?<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <script language=javascript type="text/javascript">
    var x,y,z,down=false,obj;

    function onInit()
    {
        down=true;
        obj=event.srcElement;
        obj.setCapture();
        z=obj.style.zIndex;
        obj.style.zIndex=100;
        x=event.offsetX;
        y=event.offsetY;
    }
    function move()
    {
     if (down&&event.srcElement==obj)
     {
         with(obj.style)
         {
         posLeft=document.body.scrollLeft+event.x-x;
         posTop=document.body.scrollTop+event.y-y;
         }
     }
    }
    function release()
    {
    down=false;
    obj.releaseCapture();
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div onmousemove="move();" onmousedown="onInit();" onmouseup="release();" style="position:absolute;left:50px;top:100px; border:1px; width:50px; height:50px; ">div1</div>
    <div style="position:absolute; border:1px; width:50px; height:50px;">div2</div>
    <div style="position:absolute; border:1px; width:50px; height:50px;">div3</div>
    </div>
    </form>
</body>
</html>

szh5000() ( ) 信誉：100 和我自己做的一样鼠标快速移动的时候就丢是图片

源码来自ajax中国...只支持IE
<html>
<head>
<title>DRAG the DIV</title>
<style>
*{font-size:12px}
.dragTable{
font-size:12px;
border-top:1px solid #3366cc;
margin-bottom: 10px;
width:100%;
background-color:#FFFFFF;
}
.dragTR{
cursor:move;
color:#7787cc;
background-color:#e5eef9;
}
td{vertical-align:top;}
#parentTable{
border-collapse:collapse;
letter-spacing:25px;
}
</style>
<script src="xmlhttp.js" language="javascript" type="text/javascript"></script>
<script  defer>
var draged=false;
tdiv=null;
function dragStart(){
ao=event.srcElement;
if((ao.tagName=="TD")||(ao.tagName=="TR"))ao=ao.offsetParent;
else return;
draged=true;
tdiv=document.createElement("div");
tdiv.innerHTML=ao.outerHTML;
tdiv.style.display="block";
tdiv.style.position="absolute";
tdiv.style.filter="alpha(opacity=70)";
tdiv.style.cursor="move";
tdiv.style.width=ao.offsetWidth;
tdiv.style.height=ao.offsetHeight;
tdiv.style.top=getInfo(ao).top;
tdiv.style.left=getInfo(ao).left;
document.body.appendChild(tdiv);
lastX=event.clientX;
lastY=event.clientY;
lastLeft=tdiv.style.left;
lastTop=tdiv.style.top;
try{
  ao.dragDrop();
}catch(e){}
}
function draging(){//重要:判断MOUSE的位置
if(!draged)return;
var tX=event.clientX;
var tY=event.clientY;
tdiv.style.left=parseInt(lastLeft)+tX-lastX;
tdiv.style.top=parseInt(lastTop)+tY-lastY;
for(var i=0;i<parentTable.cells.length;i++){
  var parentCell=getInfo(parentTable.cells[i]);
  if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
   var subTables=parentTable.cells[i].getElementsByTagName("table");
   if(subTables.length==0){
    if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
     parentTable.cells[i].appendChild(ao);
    }
    break;
   }
   for(var j=0;j<subTables.length;j++){
    var subTable=getInfo(subTables[j]);
    if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){
     parentTable.cells[i].insertBefore(ao,subTables[j]);
     break;
    }else{
     parentTable.cells[i].appendChild(ao);
    }
   }
  }
}
}function dragEnd(){
if(!draged)return;
draged=false;
mm=ff(150,15);
}
function getInfo(o){//取得坐标
var to=new Object();
to.left=to.right=to.top=to.bottom=0;
var twidth=o.offsetWidth;
var theight=o.offsetHeight;
while(o!=document.body){
  to.left+=o.offsetLeft;
  to.top+=o.offsetTop;
  o=o.offsetParent;
}
  to.right=to.left+twidth;
  to.bottom=to.top+theight;
return to;
}
function ff(aa,ab){//从GOOGLE网站来,用于恢复位置
var ac=parseInt(getInfo(tdiv).left);
var ad=parseInt(getInfo(tdiv).top);
var ae=(ac-getInfo(ao).left)/ab;
var af=(ad-getInfo(ao).top)/ab;
return setInterval(function(){if(ab<1){
       clearInterval(mm);
       tdiv.removeNode(true);
       ao=null;
       return
      }
     ab--;
     ac-=ae;
     ad-=af;
     tdiv.style.left=parseInt(ac)+"px";
     tdiv.style.top=parseInt(ad)+"px"
    }
,aa/ab)
}
function inint(){//初始化
for(var i=0;i<parentTable.cells.length;i++){
  var subTables=parentTable.cells[i].getElementsByTagName("table");
  for(var j=0;j<subTables.length;j++){
   if(subTables[j].className!="dragTable")break;
   subTables[j].rows[0].className="dragTR";
   subTables[j].rows[0].attachEvent("onmousedown",dragStart);
   subTables[j].attachEvent("ondrag",draging);
   subTables[j].attachEvent("ondragend",dragEnd);
  }
}
}
inint();</script>
<script language="javascript" >
function init(){readrss('http://singlepine.cnblogs.com/category/37642.html/rss','div10');
readrss('http://singlepine.cnblogs.com/category/37639.html/rss','div2');
readrss('http://singlepine.cnblogs.com/category/41822.html/rss','div5');
readrss('http://singlepine.cnblogs.com/category/37474.html/rss','div3');
readrss('http://singlepine.cnblogs.com/category/37630.html/rss','div4');
setTimeout("init()","1000");
}
</script>
</head>
<body onLoad="init()">
<form id="form1" runat="server">
<table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable">
<tr >
<td width="25%" valgin="top">
  <table border=0 class="dragTable" cellspacing="0">
   <tr>
    <td>AJAX</td>
   </tr>
   <tr>
    <td id="div4"></td>
   <tr>
  </table>
  <table border=0 class="dragTable" cellspacing="0">
   <tr>
    <td>datagrid</td>
   </tr>
   <tr>
    <td id="div5"></td>
   <tr>
  </table>
  <table border=0 class="dragTable" cellspacing="0">
    <tr>
      <td>asp.net</td>
    </tr>
    <tr>
      <td id="div3"></td>
    <tr>
    </table></td>
<td width="25%">
  <table border=0 class="dragTable" cellspacing="0">
   <tr>
    <td>C#.net</td>
   </tr>
   <tr>
    <td id="div2" > </td>
   <tr>
  </table></td>
<td width="25%">
  <table border=0 class="dragTable" cellspacing="0"  id="td3">
   <tr>
    <td  >javascrip<a href="#" onClick="document.all.td3.style.display='none'" onMouseDown="document.all.imag1.src='Icon2.gif'" onMouseUp="document.all.imag1.src='Icon.gif'" onFocus="this.blur()" ><img src="Icon.gif" width="16" height="14" id="imag1" border="0"></a></td>
   </tr>
   <tr>
    <td id="dv" ><div id="div10" onClick="readrss('http://singlepine.cnblogs.com/category/37642.html/rss','dv');"></div></td>
   <tr>
  </table>
</td>
</tr>
</table>
<a href="#" onClick="div10.style.display='none'">隐藏</a>
</form>
</body>
</html>

http://www.blueidea.com/tech/web/2006/3791.asp
这个是中文翻译的http://www.webreference.com/programming/javascript/mk/column2/index.html
这个是英文的

这个很多ajax工具包里面都提供这样的函数的

var objDel;
var objEdit;
function FillObject()
{
objDel=event.srcElement;
objEdit=event.srcElement;
}
function Notice()
{
if(objDel==null)
{
return;
}
else if(objDel.id.substring(0,3)=='img'||objDel.id.substring(0,5)=='Civil')
{

if(confirm("您是否要删除"))
{
var res=Index.DeleteMap(objDel.id);
alert(res.value);
window.location.href="Index.aspx";
}
else
{
return;
}
}
else
{
return false;
}
}

function Edit()
{
if(objEdit==null)
{
return;
}
else if(objEdit.id.substring(0,3)=='img'||objEdit.id.substring(0,5)=='Civil')
{
window.open("Edit.aspx?StrId="+objEdit.id,"newWin","scrollbars=no,width=776,height=600");
}
else
{
return;
}
}
</script>
<script language="javascript">
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}
var iMouseDown=false;
var dragObject=null;
var curTarget =null;

function makeDragable(item)
{
if(!item) return;
item.onmousedown=function(ev)
{
dragObject=this;
mouseOffset=getMouseOffset(this,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;
//获得并显示对象的名称
document.getElementById('OpObject').innerText=target.name;
if(target.onmousedown||target.getAttribute('DragObj'))
{
return false;
}
}
function mouseUp(ev)
{
if(dragObject)
{
var lastx=dragObject.style.left;
var lasty=dragObject.style.top;
lastx=lastx.replace('px','');
lasty=lasty.replace('px','');
var objId=dragObject.id.toString()
if(objId.substring(0,3)=='img')
{
objId=objId.substring(3,objId.length);
//onmouseup事件触发时说明鼠标已经松开，所以设置down变量值为false
var r = Index.SaveArmyPos(objId,lastx,lasty)
}
else if(objId.substring(0,5)=='Civil')
{
objId=objId.substring(5,objId.length);
var r = Index.SaveCivilPos(objId,lastx,lasty)
}
}
dragObject = null;
iMouseDown = false;
}
function mouseMove(ev)
{
ev=ev||window.event;
var target   = ev.target || ev.srcElement;
var mousePos = mouseCoords(ev);
if(dragObject)
{
if(dragObject.style)
{
if(ev.clientX<=290||ev.clientY<=85||ev.clientX>990||ev.clientY>650)
{
dragObject.style.position='absolute';
dragObject.style.left=dragObject.style.left;
dragObject.style.top= dragObject.style.top;
}
else
{
document.getElementById('PosX').innerText=mousePos.x - mouseOffset.x;
document.getElementById('PosY').innerText=mousePos.y - mouseOffset.y;
dragObject.style.position='absolute';
/*显示对象信息*/
dragObject.style.left=mousePos.x - mouseOffset.x;
dragObject.style.top= mousePos.y - mouseOffset.y;
}
}
}
lMouseState = iMouseDown;
if(curTarget || dragObject) return false;
}
document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup   = mouseUp;
window.onload=function()
{
var arrImage=document.getElementsByTagName('img');
for(var i=0;i<arrImage.length;i++)
{
makeDragable(arrImage[i]);
}
}

好家伙
用script.aculo.us库吧
自己写是比较的累

调试易

求拖拽技术JS代码 ███大家帮忙

解决方案 »