Je voudrais créer une section de type kanban sur mon site web, j'ai trouvé this jquery.shapeshift système qui répond à mes besoins, mais j'ai besoin d'aide pour déclencher des événements lorsque l'utilisateur déplace des éléments d'un conteneur à un autre car je ne suis pas très bon pour coder en javascript.Utilisation de jquery.shapeshift pour construire un tableau kanban: comment enregistrer des informations sur db lorsque l'événement est déclenché
Je n'ai pas vraiment besoin d'enregistrer la position des éléments lorsque je lis des éléments depuis un db sql. Ce qui me manque, c'est un moyen d'enregistrer les modifications apportées à la base de données lorsque l'utilisateur déplace un élément de la liste "À faire" vers "Terminé". Dans ce cas, je veux mettre à jour l'enregistrement DB.
Dans le code vb, je suis capable d'attraper si un élément est ajouté à un conteneur, mais je n'ai aucune idée sur la façon d'attraper l'index des articles ou des informations qui m'aident à mettre à jour le db. Ce code est en retard dans l'événement 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
Mon 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>
Toute aide est vraiment apprécié, merci