I would like to create a kanban-like section on my website, I found this jquery.shapeshift system that's meet my needs, but I need some help to trigger events when user move items from one container to another as I'm not very good at coding in javascript.
I don't really need to save items position as I read items from a sql db. What I miss is a way to save changes to the db when user move one item say from "To do" list to "Completed". In that case I want to update the db record.
In the vb code I'm able to catch if an item is added to a container but I have no clue on how to catch item index or some info that helps me to update the db. This is the code behind in the page_load event:
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
My 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>
Any helps is really appreciated, thank you
Ok, I found out after some try and error:
<script type='text/javascript'>//<![CDATA[
$(window).load(function () {
$(".container").shapeshift({
minColumns: 3,
align: "left"
}).on("ss-added", function (e, selected) {
var idAttivita = $(selected).attr("id");
var idTargetDiv = $(this).attr("id");
__doPostBack('modificaAttivita', idAttivita + ";" + idTargetDiv);
//alert(idAttivita + ";" + idTargetDiv); // Returns the index position.
});
});//]]>
</script>
idAttivita return the attribute "ID" of the child (the draggable div) idTargetDiv return the attribute "ID" of the container div in which the child is dropped. It is possible to play around with different events (here I used only "ss-added") thanks to the reference guide Necessary condition to work like this: all the div involved in the shapeshift need to have a valid ID attribute, like:
<div class="container" id="container1">
<div id="child1"></div>
</div>
In this example then idAttivita="child1" and idTargetDiv="container1"