求拖拽技术JS代码 ███大家帮忙
要求:
可以拖拽页面上的所有图片
可以获得最后停止拖拽的位置
鼠标样式一直是hand
[解决办法]
sf
[解决办法]
<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>
[解决办法]
关注
[解决办法]
源码来自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>
[解决办法]
@_@
[解决办法]
up
[解决办法]
http://www.blueidea.com/tech/web/2006/3791.asp
这个是中文翻译的
http://www.webreference.com/programming/javascript/mk/column2/index.html
这个是英文的
[解决办法]
mark
[解决办法]
mark
[解决办法]
mark
[解决办法]
这个很多ajax工具包里面都提供这样的函数的
[解决办法]
mark
------解决方案--------------------
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]);
}
}
