我有多个div标签，想要使用jquery在页面中拖放div，并且还想在数据库中保存所有div的位置，这是sql server.in short我想创建像igoogle这样的页面（http：// www.google.com/ig).Please帮我这个。
这是我的代码
.aspx页面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SavePosition.aspx.cs" Inherits="Position_SavePosition" %>
<!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 runat="server">
<title></title>
</head>
<body>
<script src="../Jquery/jquery-1.3.2.js" type="text/javascript"></script>
<%--<script src="../Jq%2002-03-2012/jquery-1.7.1.js" type="text/javascript"> </script>--%>
<script src="../AllJquery-1.8/jquery.ui.core.js" type="text/javascript"></script>
<script src="../AllJquery-1.8/jquery.ui.widget.js" type="text/javascript"></script>
<script src="../AllJquery-1.8/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="../AllJquery-1.8/jquery.ui.draggable.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#d1").draggable(
{
drag: function (event, ui) {
$("#d1").css("opacity", "0.6"); // Semi-transparent when dragging
},
stop: function (event, ui) {
//saveCoords(ui.absolutePosition.left, ui.absolutePosition.top, '', ui.helper.attr('id'));
saveCoords(300, 500, '', 1);
$("#d1").css("opacity", "1.0"); // Full opacity when stopped
},
cursor: "move"
});
});
function saveCoords(x, y, el, id) {
$.ajax({
type: "POST",
url: "C:/Users/Poly2/Desktop/Jqueydemo/Coordinates.asmx/SaveCoords",
data: "{x: '" + x + "', y: '" + y + "', element: '" + el + "', userid: '1'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if (response.d != '1') {
alert('Not Saved!');
}
},
error: function (response) {
alert(response.responseText);
}
});
}
</script>
<form id="form1" runat="server">
<div id="d1" style="border: 1px solid blue; text-align: center; width: 100px; height: 20px;">
Move this text
</div>
<%--<img src="submenu-bottom.gif" runat="server" id="d1" />--%>
</form>
.cs页面
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Web.UI.HtmlControls;
public partial class Position_SavePosition : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Coordinates coords = new Coordinates();
DataTable dt = new DataTable();
foreach (DataRow row in dt.Rows)
{
HtmlControl ctl = (HtmlControl)this.FindControl(row["element"].ToString());
if (ctl != null)
{
ctl.Style.Add("left", row["xPos"].ToString() + "px");
ctl.Style.Add("top", row["yPos"].ToString() + "px");
}
}
}
}
Web服务类（Coordinates.cs）
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data.SqlClient;
using System.Data;
/// <summary>
/// Summary description for Coordinates
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
// [System.Web.Script.Services.ScriptService]
public class Coordinates : System.Web.Services.WebService
{
//public Coordinates()
//{
// //Uncomment the following line if using designed components
// //InitializeComponent();
//}
[WebMethod]
public int SaveCoords(int x, int y, string element, int userid)
{
string connect = "Data Source=POLY2-PC;Initial Catalog=Test;User ID=sa;Password=sa123";
int result = 0;
using (SqlConnection conn = new SqlConnection(connect))
{
string query = "UPDATE Coords SET xPos = @xPos, yPos = @yPos WHERE Element = @Element AND UserID = @UserID";
using (SqlCommand cmd = new SqlCommand(query, conn))
{
cmd.Parameters.AddWithValue("xPos", x);
cmd.Parameters.AddWithValue("yPos", y);
cmd.Parameters.AddWithValue("Element", element);
cmd.Parameters.AddWithValue("UserID", userid);
conn.Open();
result = (int)cmd.ExecuteNonQuery();
}
}
return result;
}
[WebMethod]
public DataTable GetSavedCoords(int userid)
{
DataTable dt = new DataTable();
string connect = "Data Source=POLY2-PC;Initial Catalog=Test;User ID=sa;Password=sa123";
using (SqlConnection conn = new SqlConnection(connect))
{
string query = "SELECT xPos, yPos, Element FROM Coords WHERE UserID = @UserID";
using (SqlCommand cmd = new SqlCommand(query, conn))
{
cmd.Parameters.AddWithValue("UserID", userid);
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
return dt;
}
}
}
}
感谢。
答案 0 :(得分：0)
我目前正在使用PHP中的CMS，它具有通过拖放对页面顺序进行排序的功能。以下代码适用于PHP，但我确信您可以轻松地在C＃或ASP.net中重写它。
jQuery：
$("#sidebar ul").sortable({
// When user stop sorting (ie. drops the element in place)
stop: function(event, ui) {
// First go through your list to build a array of
// your items, in their new order
var pages = [];
$(this).children().each(function(index) {
pages.push({
'id': $(this).find("a").attr("rel"),
'order': index
});
});
// Make a PHP call, passing a JSON string of the array we created above
// I'm using GET but you can use POST too
$.get("/cms/ajax/set-order.php", {'a': JSON.stringify(pages)}, "json");
}
});
PHP：
[...]
// Fetch the passed JSON string
$pages = @$_GET['a'] or $pages = "a:{}";
// Decode the JSON string into array
$pages = json_decode($pages);
// Loop through each of the pages in the array and update their position
// to their new position passed in the array
foreach($pages as $index=>$page) {
$database->update(array('order' => $page->order), "id = {$page->id}");
}
[...]
再一次，这个例子是用于对CMS中的页面进行排序，但是从我可以收集的内容来看，你的内容将不会那么不同。
如果您希望我更详细地解释一下，请告诉我。
祝你好运。