一道面试题

buduanxuexi 2008-02-26 03:10:45

在一个webForm界面上放三个图片,然后在页面中任意拖放这三个图片,重新刷新页面后,图片处于拖放后的新位置
如果需要保持位置数据,将其放在xml文件中保存.

...全文

234 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

tang5399 2008-02-27

打赏
举报

和05年我出的面试题一样,这谁还让你回来做?
js记录位置然后写xml很简单

fcuandy 2008-02-26

打赏
举报

js拖放的脚本是复制的. 就是简单的dhtml操作而已.

fcuandy 2008-02-26

打赏
举报

用 xml + xsl + js + cs给你做了个完整的例子.

当然,只是实现基本的功能,细节上没有好好处理.仅仅供参考.

test.xml

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/xsl" href="test.xsl"?>

<root>

  <pic id="1" src="1.gif" />

  <pic id="2" src="2.gif" />

  <pic id="3" src="3.gif" />

</root>

test.xsl

<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">



  <xsl:template match="/">

    <head>

      <script   language="JavaScript">

        drag   =   0

        move   =   0



        function   init()   {

        window.document.onmousemove   =   mouseMove

        window.document.onmousedown   =   mouseDown

        window.document.onmouseup   =   mouseUp

        window.document.ondragstart   =   mouseStop

        }



        function   mouseDown()   {

        if   (drag)   {

        clickleft   =   window.event.x   -   parseInt(dragObj.style.left)

        clicktop   =   window.event.y   -   parseInt(dragObj.style.top)

        dragObj.style.zIndex   +=   1

        move   =   1

        }

        }



        function   mouseStop()   {

        window.event.returnValue   =   false

        }



        function   mouseMove()   {

        if   (move)   {

        dragObj.style.left   =   window.event.x   -   clickleft

        dragObj.style.top   =   window.event.y   -   clicktop

        }

        }



        function   mouseUp()   {

        move   =   0

        //alert(dragObj.style.top.replace("px","") /90 );

        switch(parseInt(dragObj.style.top.replace("px","") /90))

        {

        case 0:

        switchPosition(1)

        break;

        case 1:

        if(dragObj.style.top.replace("px","") % 90 ==0)

        {

        switchPosition(1)

        }

        else

        {

        switchPosition(2)

        }

        break;

        case 2:

        if(dragObj.style.top.replace("px","") % 90 ==0)

        {

        switchPosition(2)

        }

        else

        {

        switchPosition(3)

        }

        default:

        if((dragObj.style.top.replace("px","") / 90) <xsl:text disable-output-escaping="yes"><![CDATA[<]]></xsl:text> 1)

        {

        switchPosition(1)

        }

        else

        {

        switchPosition(3)

        }

        break;



        }

        dragObj.style.left = 200;

        }



        function switchPosition(newid)

        {

        var oldid = dragObj.id.replace("img_","")

        //alert(oldid)

        if(oldid==newid)

        {

        dragObj.style.top = oldid * 90;

        return;

        }

        else

        {

        //alert(oldid==newid);

        dragObj.style.top = newid * 90;

        var obj = document.getElementById("img_" + newid);

        obj.style.top = oldid * 90;



        obj.id = "xxx";

        dragObj.id = "img_" + newid;

        obj.id="img_" + oldid;



        var dataurl = "xmlData.aspx?act=process<xsl:text disable-output-escaping ="yes"><![CDATA[&]]></xsl:text>oldid="+oldid+"<xsl:text disable-output-escaping ="yes"><![CDATA[&]]></xsl:text>newid="+newid;

        alert(dataurl);

        var x = new ActiveXObject("Msxml2.XMLHTTP");

        x.open("GET",dataurl, false);

        x.send(null);

        

        //document.writeln(x.responseText);







        }

        }

      </script>



    </head>

    <body onload="init()" >

      <xsl:for-each select="//pic">

        <xsl:sort data-type="number" order="ascending" select="@id"/>

        <div id="div_{position()}">

          <img id="img_{position()}" src="{@src}" onmouseout="drag=0" onmouseover="dragObj=img_{position()};drag=1;" style="HEIGHT:90px;LEFT:200px;POSITION:absolute;TOP:{90*position()}px;WIDTH:90px"/>

        </div>

      </xsl:for-each>

    </body>

  </xsl:template>

</xsl:stylesheet>

xmlData.aspx.cs



using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Xml;

using System.Xml.Xsl;

public partial class xmlData : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if (Request["act"] != null)

        {

            processXML();

        }

        else

        {

            Response.Write(TransForm(getXmlData(), "test.xsl", Page));

        }

    }



    private void processXML()

    {

        if (Request["act"].ToString().ToUpper() != "PROCESS")

        {

            return;

        }



        XmlDocument xd = getXmlData();

        //注意看这里，其实xml也可以注入的，哈哈。

        XmlNode xn = xd.SelectSingleNode("//pic[@id=" + Request["oldid"].ToString() + "]");

        xn.Attributes["id"].Value  = Request["newid"];

        XmlNode xn1 = xd.SelectSingleNode("//pic[@id=" + Request["newid"].ToString() + "]");

        xn1.Attributes["id"].Value  = Request["oldid"];

        xd.Save(Server.MapPath("test.xml"));

        //Response.Write(xd.InnerXml);

        xd = null;

    }



    private XmlDocument getXmlData()

    {

        XmlDocument xd = new XmlDocument();

        xd.Load(Server.MapPath("test.xml"));

        return xd;



    }





    private string TransForm(XmlDocument xd, string xslURL, System.Web.UI.Page page)

    {

        XslTransform xsl = new XslTransform();

        xsl.Load(page.Server.MapPath(xslURL));

        System.IO.MemoryStream t = new System.IO.MemoryStream();

        xsl.Transform(xd, null, t, null);

        return System.Text.UTF8Encoding.UTF8.GetString(t.ToArray());

    }

}