Javascript 如何使此书架网格具有拖放/选择功能？ 介绍

我正在写一个玩具项目，作为概念证明和自我推销。该应用程序是一个ASP.NET5 MVC6库用户界面。我想创建一个具有动态属性的图书馆书架的网格表示，但是在过去的两周里，我完全陷入了这个问题。整个事情都是开源的，你可以找到我到目前为止所做的

问题 我希望用户能够通过我的网格拖动他们的手指来选择他们想要的任何东西。然后他们可以用同样的手势取消选择。这样做的目的是“检查”书籍。我一直在琢磨如何实现我的M3

换句话说，如何使我创建的DOM对象具有交互性

考虑下图。我有5个模拟场景

M1 最基本的情况。我点击书架，我可以看到一个3 x 5书架的图示

M2 红色表示书架上已占用的位置。我想使用数据库来获取这些信息，以及如何向用户显示这些信息

M3 绿色表示用户想要选择的内容。我想这应该在平板电脑上。所以我希望他们能够在屏幕上拖动他们的身影

M4这适用于目前并不重要的场景（查看所有内容）

M5这意味着用户可以去不同的书架，获得不同的网格。这个书架是3x5

完成 M1此操作已完成。

M5此操作已完成。这是因为我在数据库中为shelf指定了行和列：

因此，我可以起草如下文件：

<div class="grid">
@{ int columnN = Model.columnNumber;}
@{ int rowN = Model.rowNumber;}
@{ int container = 1;}

<div class="btn-group btn-group-justified" role="group">
    <!--Select All Button-->
    <button id="toggle-well-all" type="button" class="btn btn-info"><i class="fa fa-table"></i></button>
    @for (int i = 1; i <= columnN; i++)
        {
    <!--Column Header-->
        <button id="toggle-well-column-@i" type="button" class="btn btn-info">@i.ToString()</button>
    }
</div>

@{int a = 0;
        <!--Define the row based on Bin row size -->
    for (int j = 1; j <= rowN; j++)
    {
            <!--Define the row header button -->
        <div class="btn-group btn-group-justified" role="group">
            <!--Row Header-->
            <button id="toggle-well-row-@j" type="button" class="btn btn-info">@j.ToString()</button>

            <!--Well Column-->
            @for (int k = 1; k <= columnN; k++)
            {
                    <!--Well Button-->
                <button type="button" id="select-well-@container" class="btn btn-default bin-well bin-row-@j bin-col-@k" data-toggle="button"></button>
                container++;
            }
        </div>
    }
}
</div>

@{int columnN=Model.columnNumber；}
@{int rowN=Model.rowNumber；}
@{int container=1；}
@对于（int i=1；i
对于（int j=1；j
@对于（int k=1；k
这是一个相当大的问题。你本质上是在问如何构建一个完整的web应用程序堆栈。没有一个答案可以为你解决这个问题。因此，我将告诉你我将如何处理这个问题的一点细节

首先，我们需要将问题分解成更简单的事情，并一次解决一个。因为您使用的是MVC，所以我将假设使用模型-视图-控制器设计模式

考虑到这一点，我将从C#中的一个模型开始。我们至少需要一本书和一个书架类型。书类型将有一个可用性属性。书架将有一组书，可能还有一个描述书架配置的类型属性（即3x5，5x7）

一旦创建了模型，我就会创建一个代表我的数据访问层的假商店。这个商店里有几个书架，各种配置，各种书籍

然后，我将使用fake store在我的razor视图上工作，以简单地将书架呈现为一个表。我个人将使用css类标记该书在表中的状态，并使用数据属性来标识该书。继续在这里工作，直到您可以将每个可能的书架配置呈现为具有适当css类的表

最终结果表可能如下所示：

<table id="shelf">
    <tr>
        <td class="book available" data-id="1">Fight Club</td>
        <td class="book checkedout" data-id="2">The Great and Secret Show</td>
    </tr>
    <tr>
        <td class="book available" data-id="3">The Winds of Winter</td>
        <td class="book checkedout" data-id="4">Ready Player One</td>
    </tr>
</table>

$(function() {
    $("#shelf .book").on("touch", function() {
        var id = $(this).data("id");
        console.log(id);
    });
});

$(function() {
    $("#shelf .book").on("touch", ".available", function() {
        var id = $(this).data("id");
        console.log(id + " available");
    });

    $("#shelf .book").on("touch", ".checkedout", function () {
        var id = $(this).data("id");
        console.log(id + " checkedout");
    });
});

然后，为了区分一本书的状态，您可以这样做：

<table id="shelf">
    <tr>
        <td class="book available" data-id="1">Fight Club</td>
        <td class="book checkedout" data-id="2">The Great and Secret Show</td>
    </tr>
    <tr>
        <td class="book available" data-id="3">The Winds of Winter</td>
        <td class="book checkedout" data-id="4">Ready Player One</td>
    </tr>
</table>

$(function() {
    $("#shelf .book").on("touch", function() {
        var id = $(this).data("id");
        console.log(id);
    });
});

$(function() {
    $("#shelf .book").on("touch", ".available", function() {
        var id = $(this).data("id");
        console.log(id + " available");
    });

    $("#shelf .book").on("touch", ".checkedout", function () {
        var id = $(this).data("id");
        console.log(id + " checkedout");
    });
});

<>注释：我没有测试上面的代码，所以考虑它可能需要一些调整的PSUDO代码。< /P>
现在您已经有了获取图书id的触摸事件的事件处理程序，我将编写一个ajax调用，将id发布到特定于我要执行的操作的控制器操作。因此，对于可用的图书，我将发布到类似/books/checkout/id的内容。对于checkedout图书，我将发布到books/checkin/id。我将删除bookscontroller的活动关于简单返回积极响应的方法

在我的ajax调用成功事件中，我会适当地交换css类。例如，一本可用的书会将ajax调用发布到/books/checkout/id，如果成功，我会删除可用的类并添加checkedout类

接下来，我将致力于让我的假商店将数据存储在数据库中

然后，连接我的books控制器操作存根以修改数据库中的数据

P>最后，考虑错误情况。如果我把书ID贴到已经结帐的结帐动作会发生什么？如果有那个ID的书不存在呢？如果我结账，别人怎么看那个书架知道它签出了？< /P>
正如您所见，我正在解决将其分解成小块的问题。并实现构建更大的东西的小东西。我在不同的层之间跳跃—后端、控制器、客户端ui—在我前进的过程中进行存根，并最终根据需要用新代码替换

<>但是这不是全部！最后考虑你的代码的质量。尝试删除任何重复（特别是如果重复3次或更多次）。.查看所有变量、类和方法的名称，它们是否准确地表示了正在发生的事情？请记住，变量、类和方法名称可以是任意长的，使其具有描述性。还有什么比“var x”或“var bookId”更有意义

基本上我所说的是为了简洁和清晰而重构。当你回来尝试编辑这段代码时，你6个月大的自己会感谢你

不要让我开始单元测试

祝你好运。
这是一个相当大的问题。你本质上是在问如何构建一个完整的web应用程序堆栈。没有一个答案可以为你解决这个问题。因此，我将告诉你我将如何处理这个问题的一点细节

首先，我们需要将问题分解成更简单的事情，并一次解决一个。因为您使用的是MVC，所以我将假设使用模型-视图-控制器设计模式

考虑到这一点，我将开始