使用 jquery.shapeshift 构建看板：事件触发时如何在数据库上保存信息

Question

我想在我的网站上创建一个类似看板的部分，我发现 this jquery.shapeshift 系统可以满足我的需求，但我需要一些帮助来在用户将项目从一个容器移动到另一个容器时触发事件我不太擅长 javascript.

中的编码

当我从 sql 数据库读取项目时，我真的不需要保存项目位置。我想念的是一种在用户将一个项目从 "To do" 列表移动到 "Completed" 时将更改保存到数据库的方法。在那种情况下，我想更新数据库记录。

在 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>
            &nbsp;
        <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>
            &nbsp;
        <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>
            &nbsp;
        <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>

非常感谢任何帮助，谢谢

Answer 1

好的，经过一些尝试和错误我发现：

<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 child 的属性 "ID" (draggable div) idTargetDiv return 放置 child 的容器 div 的属性 "ID"。由于 reference guide，可以玩不同的事件（这里我只使用 "ss-added"）必须条件：所有参与变形的div都需要有有效的ID属性，如：

<div class="container" id="container1">
      <div id="child1"></div>
</div>

在此示例中，idAttivita="child1" 和 idTargetDiv="container1"

使用 jquery.shapeshift 构建看板：事件触发时如何在数据库上保存信息

Use of jquery.shapeshift to build a kanban board: how save info on db when event triggered

javascript

jquery

vb.net

kanban

shapeshift