Client AJAX Application--jquery integration and persistence in SharePoint 2010

This time we'll show you how to consolidate with jquery, display each list item on a virtual bulletin board (corkboard) as a drag index card, and we'll get the x and Y coordinates back to SharePoint.

A card on a bulletin board

First, in order to make our apps more interesting, it's certainly better to add some CSS styling in Pagehead (in a separate CSS style file) so that our user stories items appear on the bulletin board in a card format.

01　<style　type="text/css">
02　　　.sys-template
03　　　{
04　　　　　display:none;
05　　　}
06　　　.userStoryBackground
07　　　{
08　　　　　background-image:　url('Images/corkboard.png');
09　　　　　width:695px;
10　　　　　height:397px;
11　　　}
12　　　.userStoryCard
13　　　{
14　　　　　border:　1px　solid　#777777;
15　　　　　width:　208px;
16　　　　　height:140px;
17　　　　　cursor:　move;
18　　　　　background-image:　url('Images/blankcard.png');
19　　　　　margin:4px;
20　　　}
21　　　.userStoryDescription
22　　　{
23　　　　　font-size:　17px;
24　　　　　padding:　4px　5px　5px　5px;
25　　　}
26　　　.userStoryTitle
27　　　{
28　　　　　font-size:　15px;
29　　　　　font-weight:　bold;
30　　　　　padding:　2px　5px　0px　5px;
31　　　}
32　</style>

Then, update the contents in main to use these styles:

1　<asp:Content　ID="Main"　ContentPlaceHolderID="PlaceHolderMain"　runat="server">
2　　　　　<div　id="userStoriesList"　class="sys-template　userStoryBackground">
3　　　　　　　　　<div　　class="userStoryCard">
4　　　　　　　　　　　　　<div　class="userStoryTitle">{{　标题　}}</div>
5　　　　　　　　　　　　　<div　class="userStoryDescription"><div>{{　描述　}}</div>
6　　　　　　　　　</div>
7　　　　　</div>
8　</asp:Content>

The result seems to be this: