0
私のウェブサイトにかんばんのようなセクションを作成したいと思っています。ユーザーがあるコンテナから別のコンテナにアイテムを移動するときにイベントをトリガするために、私はJavaScriptでコーディングするのがあまりよくありません。kanbanボードを構築するためにjquery.shapeshiftを使用する：イベントがトリガされたときにDBに情報を保存する方法
私はSQLデータベースからアイテムを読み込むので、アイテムの位置を保存する必要はありません。私が忘れているのは、ユーザーが「To do」リストから「Completed」に1つのアイテムを移動したときのdbへの変更を保存する方法です。その場合、私はdbレコードを更新したいと思います。
vbコードでは、項目がコンテナに追加されたかどうかを確認できますが、項目インデックスを取得する方法やdbの更新に役立つ情報のヒントはありません。これは、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>
どれがOK