如何往网页上拖拽文本或者图片(jpg,bmp...)呢？

RT。
请各位达人帮忙，赐教。最好说的具体点，我不是很熟悉，有代码最好^^。

解决方案 »

  1.   

    图片id.onmousedown=function(){  
    var startX=event.x;
    var startY=event.Y;
    select=true;}
    图片id.onmousemove=function(){
      if(select=true){
         图片id.style.left=图片id.style.left+event.x-this.startX
         图片id.style.top=图片id.style.top+event.y-this.startY;
       }
    }
      

  2.   

    <%@ Page language="c#" Codebehind="TouchOurs.aspx.cs" AutoEventWireup="false" Inherits="THS.BWeb.Subsidy.TouchOurs" %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
    <HTML>
    <HEAD>
    <title>TouchOurs</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name="vs_defaultClientScript" content="JavaScript">
    <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    <LINK href="../appCssStyle/style.css" type="text/css" rel="Stylesheet">
    <style> *{font-size:12px}
    .dragTable{ font-size:12px; border-top:1px solid #3366cc; margin-bottom: 10px; width:100%; background-color:#FFFFFF; }
    td{vertical-align:top;}
    .dragTR{ cursor:move; color:#7787cc; background-color:#e5eef9; height:20px; padding-left:5px; font-weight:bold; }
    #parentTable{ border-collapse:collapse; letter-spacing:25px; }
    </style>
    <script language="javascript" defer>
    //more javascript from http://www.smallrain.net
    var Drag={dragged:false,
    ao:null,
    tdiv:null,
    dragStart:function(){
    Drag.ao=event.srcElement;
    if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){
    Drag.ao=Drag.ao.offsetParent;
    Drag.ao.style.zIndex=100;
    }else
    return;
    Drag.dragged=true;
    Drag.tdiv=document.createElement("div");
    Drag.tdiv.innerHTML=Drag.ao.outerHTML;
    Drag.ao.style.border="1px dashed red";
    Drag.tdiv.style.display="block";
    Drag.tdiv.style.position="absolute";
    Drag.tdiv.style.filter="alpha(opacity=70)";
    Drag.tdiv.style.cursor="move";
    Drag.tdiv.style.border="1px solid #000000";
    Drag.tdiv.style.width=Drag.ao.offsetWidth;
    Drag.tdiv.style.height=Drag.ao.offsetHeight;
    Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;
    Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;
    document.body.appendChild(Drag.tdiv);
    Drag.lastX=event.clientX;
    Drag.lastY=event.clientY;
    Drag.lastLeft=Drag.tdiv.style.left;
    Drag.lastTop=Drag.tdiv.style.top;
    },draging:function(){//重要:判断MOUSE的位置
    if(!Drag.dragged||Drag.ao==null)return;
    var tX=event.clientX;
    var tY=event.clientY;
    Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
    Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
    for(var i=0;i<parentTable.cells.length;i++){
    var parentCell=Drag.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(Drag.ao);
    }
    break;
    }
    for(var j=0;j<subTables.length;j++){
    var subTable=Drag.getInfo(subTables[j]);
    if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){
    parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
    break;
    }else{
    parentTable.cells[i].appendChild(Drag.ao);
    }
    }
    }
    }
    }
    ,
    dragEnd:function(){
    if(!Drag.dragged)return;
    Drag.dragged=false;
    Drag.mm=Drag.repos(150,15);
    Drag.ao.style.borderWidth="0px";
    Drag.ao.style.borderTop="1px solid #3366cc";
    Drag.tdiv.style.borderWidth="0px";
    Drag.ao.style.zIndex=1;
    },
    getInfo:function(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;
    },
    repos:function(aa,ab){
    var f=Drag.tdiv.filters.alpha.opacity;
    var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
    var tt=parseInt(Drag.getInfo(Drag.tdiv).top);
    var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;
    var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;
    var kf=f/ab;
    return setInterval(function(){if(ab<1){
    clearInterval(Drag.mm);
    Drag.tdiv.removeNode(true);
    Drag.ao=null;
    return;
    }
    ab--;
    tl-=kl;
    tt-=kt;
    f-=kf;
    Drag.tdiv.style.left=parseInt(tl)+"px";
    Drag.tdiv.style.top=parseInt(tt)+"px";
    Drag.tdiv.filters.alpha.opacity=f;
    }
    ,aa/ab)
    },
    inint:function(){//初始化
    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",Drag.dragStart);
    }
    }
    document.onmousemove=Drag.draging;
    document.onmouseup=Drag.dragEnd;
    }
    //end of Object Drag
    }
    Drag.inint();function _show(str){
    var w=window.open('','');
    var d=w.document;
    d.open();
    str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=\"$1\"$2");
    str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />");
    str=str.replace(/\r/g,"<br />\n");
    d.write(str);
    }
    </script>
    </HEAD>
    <body>
    <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><b>GMAIL</b></td>
    </tr>
    <tr>
    <td>暂时无法显示GMAIL内容</td>
    <tr>
    </tr>
    </table>
    <table border="0" class="dragTable" cellspacing="0">
    <tr>
    <td>新浪体育</td>
    </tr>
    <tr>
    <td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步<br>
    印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角 美加施冷箭</td>
    <tr>
    </tr>
    </table>
    <table border="0" class="dragTable" cellspacing="0">
    <tr>
    <td>焦点</td>
    </tr>
    <tr>
    <td>
    京广线中断4小时20临客返汉晚点 中国新闻网-湖北分社 - 所有 235 相关报道 ?哈马斯已有总理人选解放日报报业集团 - 所有 489 相关报道 
    ?陈水扁是两岸关系麻烦制造者 武汉晨报 - 所有 179 相关报道 ?</td>
    <tr>
    </tr>
    </table>
    </td>
    <td width="25%">
    <table border="0" class="dragTable" cellspacing="0">
    <tr>
    <td>中关村在线</td>
    </tr>
    <tr>
    <td>新年行情速递 双敏板卡低价推荐 终于等到了，映泰6600GT一降降一百 罗技G15游戏键盘热力促销，代购价仅529元
    </td>
    <tr>
    </tr>
    </table>
    </td>
    <td width="25%">
    <table border="0" class="dragTable" cellspacing="0">
    <tr>
    <td>网易商业</td>
    </tr>
    <tr>
    <td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
    <tr>
    </tr>
    </table>
    <table border="0" class="dragTable" cellspacing="0">
    <tr>
    <td>黑可天下</td>
    </tr>
    <tr>
    <td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
    <tr>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </body>
    </HTML>
      

  3.   

    图片id.onmouseup=fucntion(){select=false;}
    大概是这个意思,具体细节写的时候没注意(例如大小写),自己改一下.
      

  4.   

    我的意思是：
    网页上有多个DIV，我可以往第一个DIV中拖一个文本文件，这时网页上显示一个这个文件的名字（或者其他信息）。然后我再往第二个DIV中拖一个jpg图片，这时网页上显示这个图片...没错，是运行的网页，不是设计时拖。
      

  5.   

    http://wiki.script.aculo.us/scriptaculous/show/DragAndDrop