一道面试题
在一个webForm界面上放三个图片,然后在页面中任意拖放这三个图片,重新刷新页面后,图片处于拖放后的新位置如果需要保持位置数据,将其放在xml文件中保存.
--------------------编程问答-------------------- 要使用到AJAX技术，(*^__^*) 嘻嘻…… --------------------编程问答-------------------- 飘。。。 --------------------编程问答-------------------- AJAX实现ZL的需求会比较容易写 --------------------编程问答-------------------- 看不懂。是不是。
如果需要保持位置数据,将其放在xml文件中保存.
改成
如果需要保持位置数据,如何将其放在xml文件中保存? --------------------编程问答-------------------- 如果只在本机上的话用js就可以直接写到文件
要放服务器上的话用ajax --------------------编程问答-------------------- 不会，顶~ --------------------编程问答-------------------- 是的，就是页面上放三张图片，随意拖动，拖动后的位置保存在XML文件中，请大家具体点，能否给出实例来，
我对AJAX不太熟悉，谢谢大家了 --------------------编程问答-------------------- 这个用js就可以了，记录坐标写入xml --------------------编程问答-------------------- 可以利用WebPart实现，采用XML存储个性化数据即可 --------------------编程问答-------------------- 是不是类似chinaren的那种功能；使用vs2005的webparts控件就可以实现 --------------------编程问答-------------------- 可以利用WebPart实现，采用XML存储个性化数据即可
貌似正解。 --------------------编程问答-------------------- 用 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
--------------------编程问答-------------------- js拖放的脚本是复制的. 就是简单的dhtml操作而已. --------------------编程问答-------------------- 和05年我出的面试题一样,这谁还让你回来做?
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());
}
}
js记录位置然后写xml很简单
补充：.NET技术 , ASP.NET
