0
我想在我的网站上创建一个类似看板的部分，我发现this jquery.shapeshift系统符合我的需求，但我需要一些帮助当用户将项目从一个容器移动到另一个容器时触发事件，因为我不擅长JavaScript编码。使用jquery.shapeshift构建看板：如何在事件触发时将db信息保存到db中
我真的不需要保存项目的位置，因为我从sql db读取项目。我想念的是当用户将一个项目从“待办事项”列表中移动到“已完成”时，将更改保存到数据库的方法。在这种情况下，我想更新数据库记录。
在vb代码中，我能够捕获如果一个项目被添加到一个容器，但我不知道如何捕获项目索引或帮助我更新数据库的一些信息。这是在Page_Load事件代码：
Me.ClientScript.GetPostBackEventReference(Me, String.Empty)
If IsPostBack Then 'Necessario per callServersideFunction()
Dim eventTarget As String
Dim eventArgument As String
If Me.Request("__EVENTTARGET") Is Nothing Then
eventTarget = String.Empty
Else
eventTarget = Me.Request("__EVENTTARGET")
End If
If Me.Request("__EVENTARGUMENT") Is Nothing Then
eventArgument = String.Empty
Else
eventArgument = Me.Request("__EVENTARGUMENT")
End If
If eventTarget = "CustomPostBack" Then
Dim valuePassed As String = eventArgument
End If
End If
我的aspx：
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="kanban.aspx.vb" Inherits="Efesto.kanban2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="shapeshift/jquery.shapeshift.js"></script>
<script src="shapeshift/vendor/jquery.touch-punch.min.js"></script>
<style type="text/css">
.container {
border-left: 2px dashed #000;
border-right: 2px dashed #000;
border-bottom: 2px dashed #000;
position: relative;
}
.container > div {
background-color: antiquewhite;
border: 1px solid black;
height: 100px;
position: absolute;
width: 80px;
box-shadow: 5px 5px 5px rgba(85,85,85,0.5);
}
.container > div[data-ss-colspan='2'] {
width: 170px;
}
.container .ss-placeholder-child {
background: transparent;
border: 1px dashed white;
}
.titolo {
font-family: 'Droid Serif', serif;
font-size: 20px;
font-weight: bold;
border-left: 2px dashed #000;
border-right: 2px dashed #000;
border-top: 2px dashed #000;
padding: 5px;
}
.dafare {
background-color: lightgrey;
}
.dafareoggi {
background-color: #e93946;
}
.incorso {
background-color: #eceda5;
}
.completate {
background-color: #6ac276;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function() {
$(".container").shapeshift({
minColumns: 3
}).on('ss-drop-complete', function() {
// get the new arrangement and serialise it to localStorage as a string
var value1 = $(this) + " " + $(selected);
__doPostBack('CustomPostBack', value1);
});
});//]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="titolo dafare">DA FARE</div>
<div class="container dafare ">
<asp:Repeater runat="server" ID="rptDaFare" DataSourceID="SqlAttivitaDaFare">
<ItemTemplate>
<div><%# Eval("Titolo") %></div>
</ItemTemplate>
</asp:Repeater>
</div>
<div class="titolo dafareoggi">DA FARE OGGI</div>
<div class="container dafareoggi">
<div></div>
<div></div>
<%--data-ss-colspan='2'--%>
<div></div>
<div></div>
</div>
<div class="titolo incorso">IN CORSO</div>
<div class="container incorso ">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="titolo completate">COMPLETATE</div>
<div class="container completate">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent) {
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "LNysC"
}], "*")
}
</script>
</div>
<asp:SqlDataSource ID="SqlAttivitaDaFare" runat="server" ConnectionString="<%$ ConnectionStrings:dbVulcanoConnectionString %>" SelectCommand="SELECT * FROM [Attivita] WHERE (([Completato] = @Completato) AND ([DataFine] IS NULL) AND ([IDUtente] = @IDUtente)) ORDER BY [DataInser], [DataInizio], [Titolo]">
<SelectParameters>
<asp:Parameter DefaultValue="False" Name="Completato" Type="Boolean" />
<asp:SessionParameter Name="IDUtente" SessionField="idUtente" Type="Int16" />
</SelectParameters>
</asp:SqlDataSource>
</form>
</body>
</html>
任何帮助是非常感谢，谢谢