类似这种可以拖拽的怎么做

类似如下连接的: 
http://go.news.163.com/zhufu/gdzg_zhufu.jsp有源码推荐的给高分.
有思路的纪念分.
谢谢了

解决方案 »

  1.   

    工具箱中的WebParts部分貌似可以这样
    msn主页好像是可以这样的
      

  2.   

    貌似 webParts 是干这个用的,没有研究过 google也有这样的技术
      

  3.   

    1,AjaxToolKit中的RecorderList控件可以实现拖拽
    2,JavaScript
    类似代码如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <!-- saved from url=(0080)http://www.pconline.com.cn/pcedu/empolder/wz/javascript/0607/other/srcode05.html -->
    <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>
      

  4.   


    <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 <[email protected]>
    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>
      

  5.   

    完全用JS实现：
    1、当点击鼠标左键时，记录下当前座标。
    2、鼠标移动时记录当前座标，并根据当前座标与1处的起始座标重置目标位置。完整代码如下：
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript">
    <!--
    var theFlag = 0;//操作是否开始(1是；0否)
    var theDiv;//拖曳对象
    var x = 0;//鼠标按下时的初始x座标
    var y = 0;//鼠标按下时的初始y座标
    var divTop = 0;//拖曳对象当前的top值
    var divLeft = 0;//拖曳对象当前的left值//鼠标按下事件
    function selectBegin(e)
    {
    theFlag = 1;
    e.setCapture();

    theDiv = document.getElementById("move");
    //鼠标起始值
    x = parseInt(document.body.scrollLeft) + parseInt(event.clientX);//鼠标按下初始x座标值
    y = parseInt(document.body.scrollTop) + parseInt(event.clientY);//鼠标按下初始y座标值
    divTop = parseInt(theDiv.offsetTop);//拖曳对象当前的top值
    divLeft = parseInt(theDiv.offsetLeft);//拖曳对象当前的left值
    }
    //鼠标移动事件
    function selectMove(e)
    {
    if(theFlag == 1)
    {
    var mouseX = parseInt(document.body.scrollLeft) + parseInt(event.clientX);//捕获鼠标当前座标
    var mouseY = parseInt(document.body.scrollTop) + parseInt(event.clientY);
    theDiv.style.top = divTop + (mouseY - y);//重置拖曳对象位置
    theDiv.style.left = divLeft + (mouseX - x);
    }
    }
    //鼠标松开事件
    function selectEnd(e)
    {
    theFlag = 0;
    e.releaseCapture();
    }
    -->
    </script>
    </head>
    <body style="margin:0px;padding:0px;">
    <div style="float:left;width:600px;height:600px;background-color:#f0f0f0;">
    <!--onmousedown：鼠标按下事件；onmousemove：鼠标移动事件；鼠标松开事件：onmouseup-->
    <div id="move" style="width:100px;height:100px;border:black 1px dashed;position:absolute;top:0px;left:0px;cursor:move;" onmousedown="selectBegin(this);" onmousemove="selectMove(this);" onmouseup="selectEnd(this);">拖曳图层</div>
    </div>
    </body>
    </html>
      

  6.   

    模板 +DB保持位置 +JS定位
      

  7.   

    是啊,确实厉害,自从搞.net,js已经不太会了...
      

  8.   

    看了下，他那个JS文件如下，你自己可以试一下把他那个页面保存下来，在页面目录下再建立一个叫"js"的目录，把脚本文件保存成"drag.jjs"就可以运行了：
    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=MUp
    document.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;
       }  
    }
      

  9.   

    http://go.news.163.com/zhufu/js/drag.jjs