求把datalist1中绑定的10个图片控件image放到httptable中的image0~image9,
要求实现脱放的效果,
希望有代码和解释,
各位老大哪位有经验,帮帮忙啦!!!!!

解决方案 »

  1.   

    脱机就是在网络断开的情况下吗,用xmlhttp差不多可以实现,不过没有试过带图片的
      

  2.   

    高手们都去哪里啦?可怜我白天coding,晚上还得来搞难题,没有人帮我吗??????
      

  3.   

    用层来实现吧,具体的你可以去看看msn space,里面有拖放功能的,我没研究过
      

  4.   

    msn space只是拖,没有实现放,我是想放的时候替换放下位置的图片
      

  5.   

    我没有做过,但可以给个思路建议: 用javascript在客户端,实现拖,在document的onmouseup事件中获得鼠标的当前坐标event.x,event.y, 然后遍历document对象的所有元素及类型或直接找到你的表格id,用他们的坐标区域与你当前鼠标的位置进行判断,如果判断附合你的逻辑,则在该元素中创建图片标记(selectedElement.createElement("<img width='20' height='30' src='...'>"). 想这样就差不多啦!
      

  6.   

    总算等到个不错的,不过我是想用c#实现,少用javascript,
    一方面是javascript我不熟悉,
    另一方面要对数据库操作的,需要服务器端功能呢
      

  7.   

    不要用C#做..虽然可以实现你的效果..但是web最注重性能...JS不会没关系..可以用源码..
      

  8.   

    一定要用JS做呀,给你找了个例子看看:
    以下代码加入<head>区域
    <STYLE>
    th{background-color:#CCCCCC}
    </STYLE>
    <script language="javascript">
    //more javascript from http://www.smallrain.net 
    /*--------全局变量-----------*/
    var dragedTable_x0,dragedTable_y0,dragedTable_x1,dragedTable_y1;
    var dragedTable_movable = false;
    var dragedTable_preCell = null;
    var dragedTable_normalColor = null;
    //起始单元格的颜色
    var dragedTable_preColor = "lavender";
    //目标单元格的颜色
    var dragedTable_endColor = "#FFCCFF";
    var dragedTable_movedDiv = "dragedTable_movedDiv";
    var dragedTable_tableId = "";
    /*--------全局变量-----------*/function DragedTable(tableId)
    {
        dragedTable_tableId = tableId;
        var oTempDiv = document.createElement("div");
        oTempDiv.id = dragedTable_movedDiv;
        oTempDiv.onselectstart = function(){return false};
        oTempDiv.style.cursor = "hand"; 
        oTempDiv.style.position = "absolute";
        oTempDiv.style.border = "1px solid black";
        oTempDiv.style.backgroundColor = dragedTable_endColor;
        oTempDiv.style.display = "none";
        document.body.appendChild(oTempDiv);
        document.all(tableId).onmousedown = showDiv;
    }//得到控件的绝对位置
    function getPos(cell)
    {
        var pos = new Array();
        var t=cell.offsetTop;
        var l=cell.offsetLeft;
        while(cell=cell.offsetParent)
        {
            t+=cell.offsetTop;
            l+=cell.offsetLeft;
        }
        pos[0] = t;
        pos[1] = l;
        return pos;
    }//显示图层
    function showDiv()
    {
        var obj = event.srcElement; 
        var pos = new Array();  
        //获取过度图层
        var oDiv = document.all(dragedTable_movedDiv);
        if(obj.tagName.toLowerCase() == "td")
        {
            obj.style.cursor = "hand";
            pos = getPos(obj);
            //计算中间过度层位置,赋值
            oDiv.style.width = obj.offsetWidth;
            oDiv.style.height = obj.offsetHeight;   
            oDiv.style.top = pos[0];
            oDiv.style.left = pos[1];
            oDiv.innerHTML = obj.innerHTML;
            oDiv.style.display = "";
            dragedTable_x0 = pos[1];
            dragedTable_y0 = pos[0];
            dragedTable_x1 = event.clientX;
            dragedTable_y1 = event.clientY;
            //记住原td
            dragedTable_normalColor = obj.style.backgroundColor;
            obj.style.backgroundColor = dragedTable_preColor;
            dragedTable_preCell = obj;
            
            dragedTable_movable = true;
        }
    }
    function dragDiv()
    {
        if(dragedTable_movable)
        {
            var oDiv = document.all(dragedTable_movedDiv);
            var pos = new Array();
            oDiv.style.top = event.clientY - dragedTable_y1 + dragedTable_y0;
            oDiv.style.left = event.clientX - dragedTable_x1 + dragedTable_x0;
            var oTable = document.all(dragedTable_tableId); 
            for(var i=0; i<oTable.cells.length; i++)
            {
                if(oTable.cells[i].tagName.toLowerCase() == "td")
                {
                    pos = getPos(oTable.cells[i]);
                    if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth 
                       && event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight)
                    {
                        if(oTable.cells[i] != dragedTable_preCell)
                            oTable.cells[i].style.backgroundColor = dragedTable_endColor;                   
                    }
                    else
                    {
                        if(oTable.cells[i] != dragedTable_preCell)
                            oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
                    }
                }
            }           
        }
    }function hideDiv()
    {
        if(dragedTable_movable)
        {
            var oTable = document.all(dragedTable_tableId);
            var pos = new Array();  
            if(dragedTable_preCell != null)
            {
                for(var i=0; i<oTable.cells.length; i++)
                {           
                    pos = getPos(oTable.cells[i]);
                    //计算鼠标位置,是否在某个单元格的范围之内
                    if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth 
                        && event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight)
                    {
                        if(oTable.cells[i].tagName.toLowerCase() == "td")
                        {
                            //交换文本
                            dragedTable_preCell.innerHTML = oTable.cells[i].innerHTML;
                            oTable.cells[i].innerHTML = document.all(dragedTable_movedDiv).innerHTML;
                            //清除原单元格和目标单元格的样式
                            dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
                            oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
                            oTable.cells[i].style.cursor = "";
                            dragedTable_preCell.style.cursor = "";
                            dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
                        }
                    }
                }
            }
            dragedTable_movable = false;
            //清除提示图层
            document.all(dragedTable_movedDiv).style.display = "none";      
        }
    }document.onmouseup = function()
    {   
        hideDiv();
        var oTable = document.all(dragedTable_tableId);
        for(var i=0; i<oTable.cells.length; i++)
            oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
    }document.onmousemove = function()
    {
        dragDiv();
    }</script>
    <script language="javascript">
    function init()
    {
     //注册可拖拽表格
     new DragedTable("tableId");
    }
    </script>以下代码加入<body>区域
    <TABLE align="center" id="tableId" width="90%" border="1"   cellpadding="0" cellspacing="1" bordercolor="#000000">
      <TR>
        <TH colspan="4" style="">拖动交换单元格内容</TH>
      </TR>  
      <TR>
        <TD>Java</TD>
        <TD>Java One </TD>
        <TD>JBuilder</TD>
        <TD>Stuts</TD>
      </TR>
      <TR>
        <TD>C++</TD>
        <TD>Visual Studio</TD>
        <TD>Office</TD>
        <TD>Windows</TD>
      </TR>
      <TR>
        <TD>PhotoShop</TD>
        <TD>Java</TD>
        <TD>Illustrator</TD>
        <TD>PageMaker</TD>
      </TR>
      <TR>
        <TD>Cartoon</TD>
        <TD>Telephone</TD>
        <TD>China</TD>
        <TD>USA</TD>
      </TR>
      <TR>
        <TD>Java</TD>
        <TD>Java One </TD>
        <TD>JBuilder</TD>
        <TD>Stuts</TD>
      </TR>
      <TR>
        <TD>C++</TD>
        <TD>Visual Studio</TD>
        <TD>Office</TD>
        <TD>Windows</TD>
      </TR>
      <TR>
        <TD>PhotoShop</TD>
        <TD>Flash</TD>
        <TD>Illustrator</TD>
        <TD>PageMaker</TD>
      </TR>
      <TR>
        <TD>Cartoon</TD>
        <TD>Telephone</TD>
        <TD>China</TD>
        <TD>USA</TD>
      </TR>
    </TABLE>
      

  9.   

    说明:
    1、在<body>中加上oncontextmenu="return false;" onload="init()"变为<body oncontextmenu="return false;" onload="init()">
    2、在调用函数中function init()
    {
     //注册可拖拽表格
     new DragedTable("tableId");
    }tableId为要进行操作的表格ID
      

  10.   

    这个东东是客户端的效果,不能用C#实现,要用javascript or css or dhtml
      

  11.   

    Study_Now() 
    强!!!!!!
      

  12.   

    anbody else can answer me?