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>
任何幫助是非常感謝，謝謝