类似这种可以拖拽的如何做

2012-02-10

类似这种可以拖拽的怎么做类似如下连接的:http://go.news.163.com/zhufu/gdzg_zhufu.jsp有源码推荐的给高

类似这种可以拖拽的怎么做
类似如下连接的:
http://go.news.163.com/zhufu/gdzg_zhufu.jsp

有源码推荐的给高分.
有思路的纪念分.
谢谢了

[解决办法]
工具箱中的WebParts部分貌似可以这样
msn主页好像是可以这样的
[解决办法]
不过介绍这方面的东西实在不多，
[解决办法]
貌似 webParts 是干这个用的,没有研究过 google也有这样的技术
[解决办法]
1,AjaxToolKit中的RecorderList控件可以实现拖拽

2,JavaScript
类似代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT>
var iMouseDown = false;
var dragObject = null;
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}

// Demo 0 variables
var DragDrops = [];
var curTarget = null;
var lastTarget = null;

function makeDraggable(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;

if(target.onmousedown || target.getAttribute('DragObj')){
return false;
}
}

function mouseUp(ev){

//dragObject = null;

if(dragObject){
ev = ev || window.event;
var mousePos = mouseCoords(ev);

var dT = dragObject.getAttribute('droptarget');
if(dT){
var targObj = document.getElementById(dT);
var objPos = getPosition(targObj);
if((mousePos.x > objPos.x) && (mousePos.y > objPos.y)
&& (mousePos.x<(objPos.x+parseInt(targObj.offsetWidth)))
&& (mousePos.y<(objPos.y+parseInt(targObj.offsetHeight)))){
var nSrc = targObj.getAttribute('newSrc');
if(nSrc){
dragObject.src = nSrc;
setTimeout(function(){
if(!dragObject || !dragObject.parentNode) return;
dragObject.parentNode.removeChild(dragObject);
dragObject = null;
}, parseInt(targObj.getAttribute('timeout')));
} else {
dragObject.parentNode.removeChild(dragObject);
}
}
}
}
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;
dragObject.style.left = mousePos.x - mouseOffset.x;
}

// 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;
}

function addDropTarget(item, target){
item.setAttribute('droptarget', target);
}

document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;

window.onload = function (){
makeDraggable(document.getElementById('DragImage9'));
makeDraggable(document.getElementById('DragImage10'));
makeDraggable(document.getElementById('DragImage11'));
makeDraggable(document.getElementById('DragImage12'));

addDropTarget(document.getElementById('DragImage9'), 'TrashImage1');
addDropTarget(document.getElementById('DragImage10'), 'TrashImage1');
addDropTarget(document.getElementById('DragImage11'), 'TrashImage1');
addDropTarget(document.getElementById('DragImage12'), 'TrashImage1');
}
</SCRIPT>

<META content="MSHTML 6.00.6000.16587" name=GENERATOR></HEAD>
<BODY>
<FIELDSET id=Demo6 style="HEIGHT: 70px">
<H3>Demo - Drag any image onto the trashcan</H3><IMG id=TrashImage1
src="移动一个元素_files/drag_drop_trash.gif" newSrc="transparent.gif" timeout="600">
<IMG id=DragImage9 src="移动一个元素_files/drag_drop_spade.gif"> <IMG id=DragImage10
src="移动一个元素_files/drag_drop_heart.gif"> <IMG id=DragImage11
src="移动一个元素_files/drag_drop_diamond.gif"> <IMG id=DragImage12
src="移动一个元素_files/drag_drop_club.gif"> </FIELDSET> </BODY></HTML>

[解决办法]

HTML code

 
  <style> 
 .shadow1 {  
  cursor:hand; position:absolute; top:50px;  left:50px; width: 120px; height:120px; filter: dropshadow(color="#aaaaaa", offx=5, offy=5, positive=1) Alpha(Opacity=80); 
 } 
 .shadow2 { 
  cursor:hand; position:absolute; top:200px; left:50px; width: 120px; height:120px; filter: shadow(color=#aaaaaa,direction:135) Alpha(Opacity=80); 
 } 
  </style> 
  
  <script> 
 //coded by windy_sk  <windy_sk@126.com> 
 var move_obj = null; 
 document.onmousemove = function(){ 
  if(move_obj==null)return; 
  move_obj.style.top=event.y-move_obj.offsetHeight/2; 
  move_obj.style.left=event.x-move_obj.offsetWidth/2; 
 } 
  </script> 
  
  <body background="http://www.iecn.net/forum/images/iecn/logo.gif"> 
  
  <div onselectstart="return false" class=shadow1 onmousedown="move_obj=this" onmouseup="move_obj=null"> 
   <table width=100 height=100 style="background-color:white;border: 1px black solid"> 
  <tr> <td>Drag Me ! </td> </tr> 
   </table> 
  </div> 
  
  <div onselectstart="return false" class=shadow2 onmousedown="move_obj=this" onmouseup="move_obj=null"> 
   <table width=100 height=100 style="background-color:white;border: 1px black solid"> 
  <tr> <td>Drag Me ! </td> </tr> 
   </table>  
 
  </div>

[解决办法]
91aspx.netasp.net源码下载.上面你需要的例子
[解决办法]
模板 +DB保持位置 +JS定位
[解决办法]
看了下，他那个JS文件如下，你自己可以试一下把他那个页面保存下来，在页面目录下再建立一个叫"js"的目录，把脚本文件保存成"drag.jjs"就可以运行了：

JScript code

function ssdel(){if (event){lObj = event.srcElement ;while (lObj && lObj.tagName != "DIV") lObj = lObj.parentElement ;}    var id=lObj.id;    document.getElementById(id).outerHTML="";  }var Obj='';var index=10000;document.onmouseup=MUpdocument.onmousemove=MMovefunction MDown(Object){Obj=Object.id;document.getElementById(Obj).setCapture();pX=event.x-document.getElementById(Obj).style.pixelLeft;pY=event.y-document.getElementById(Obj).style.pixelTop;}function MMove(){if(Obj!=''){if (event.x-pX>0 && event.x-pX<document.body.offsetWidth-document.getElementById(Obj).offsetWidth){ document.getElementById(Obj).style.left=event.x-pX;}if (event.y-pY>0 && event.y-pY<document.body.offsetHeight-document.getElementById(Obj).offsetHeight){ document.getElementById(Obj).style.top=event.y-pY;}}}function MUp(){if(Obj!=''){ document.getElementById(Obj).releaseCapture(); Obj=''; }}//获得焦点;function getFocus(obj){        if(obj.style.zIndex!=index)   {           index = index + 2;           var idx = index;           obj.style.zIndex=idx;   }  }
[解决办法]
这个网上很多吗，类似于许愿墙，以前做过。
[解决办法]
http://go.news.163.com/zhufu/js/drag.jjs

热点排行