Question

我一直在浏览很多关于jQuery draggable / droppable的教程，并试图将它应用到ASP.NET MVC，但我真的很困惑。

我发现的大部分样本似乎都很难理解，至少它与有线的地方有关。我基本上试图有一个可定位的盒子（一个'名册'）和一个单位列表（'参加者'）。目标是能够将任何单元拖到框中，并将它们添加到数据库的名单中。

有没有人知道一些更简单的示例可能会对如何在ASP.NET MVC中使用jQuery的这一部分有所了解？

例如，我一直在关注http://philderksen.com/2009/06/18/drag-and-drop-categorized-item-list-with-jquery-and-aspnet-mvc-part-1/并且它非常整洁，但它并没有解释我需要什么。它没有多大意义，并且大部分代码都非常散乱，我甚至无法追踪某些调用的位置，以确定连接方式。（例如，jQuery如何调用Controller操作，以便在删除某些内容时触发？如何获取被拖动项目的ID以便将其添加到目标？）

在这里，我做了一些改变 - 我为这种困惑道歉。它仍然没有完全发挥作用我是如何努力的。如果事情在原始列表中重新排列，是否有可能使其不是火灾事件，但只有当它被放到另一个列表中时才会出现？

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Draggable.Item>>" %>

<asp:Content ContentPlaceHolderID="TitleContent" runat="server">
    Index
</asp:Content>
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Index</h2>
    <div style="float: left; width: 250px;">
        <ul class="itemBox">
            <% foreach (var item in Model)
      { %>
            <% Html.RenderPartial("Item", item); %>
            <% } %>
        </ul>
    </div>
    <div style="float: left; width: 250px;">
        <ul class="itemBox">
            <p>
                Drop here</p>
        </ul>
    </div>
</asp:Content>
<asp:Content ContentPlaceHolderID="ScriptContent" runat="server">
    <style type="text/css">
        #draggable {
            width: 100px;
            height: 100px;
            padding: 0.5em;
            float: left;
            margin: 10px 10px 10px 0;
        }
        #droppable {
            width: 150px;
            height: 150px;
            padding: 0.5em;
            float: left;
            margin: 10px;
        }
    </style>

    <script type="text/javascript">
        $(function() {
            $(".itemList").sortable({
                connectWith: ".itemList",
                containment: "document",
                cursor: "move",
                opacity: 0.8,
                placeholder: "itemRowPlaceholder",

                update: function(event, ui) {
                    //Extract column num from current div id
                    var colNum = $(this).attr("id").replace(/col_/, "");
                    $.post("/Home/UpdateSortOrder", { columnNum: colNum, sectionIdQueryString: $(this).sortable("serialize") });
                }
            });
        });
    </script>

</asp:Content>

好吧，我正在尝试按照菲尔的指示，这是我到目前为止所做的......我希望我甚至走在正确的轨道上。这对我来说都很新鲜。我正在努力尝试，但“更新”的东西永远不会被解雇。。

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Draggable.Item>>" %>

<asp:Content ContentPlaceHolderID="TitleContent" runat="server">
    Index
</asp:Content>
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Index</h2>
    <div style="float: left; width: 250px;">
        <ul id="sortable" class="itemBox">
            <% foreach (var item in Model)
      { %>
            <% Html.RenderPartial("Item", item); %>
            <% } %>
        </ul>
    </div>
    <div id="droppable" class="ui-widget-header">
        <p>
            Drop here</p>
    </div>
</asp:Content>
<asp:Content ContentPlaceHolderID="ScriptContent" runat="server">
    <style type="text/css">
        .draggable {
            width: 100px;
            height: 100px;
            padding: 0.5em;
            float: left;
            margin: 10px 10px 10px 0;
        }
        #droppable {
            width: 150px;
            height: 150px;
            padding: 0.5em;
            float: left;
            margin: 10px;
        }
    </style>

    <script type="text/javascript">
        $(function() {
            $("#sortable").sortable({
                update: function(event, ui) {
                    //Extract column num from current div id
                    var colNum = $(this).attr("id").replace(/item_/, "");

                    $.post("UpdateSortOrder", { columnNum: colNum, sectionIdQueryString: $(this).sortable("serialize") });
                }
            });
            $("#droppable").droppable({
                drop: function(event, ui) {
                    $(this).find('p').html('Dropped!');
                    //Extract column num from current div id
                    var colNum = $(this).attr("id").replace(/item_/, "");

                    $.post("UpdateSortOrder", { columnNum: colNum, sectionIdQueryString: $(this).sortable("serialize") });
                }

            });
        });
    </script>

</asp:Content>

以及Item.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Draggable.Item>" %>

<li class="itemRow" id="item_<%= Model.ItemId %>">
    <p>Drag me to my target</p>
</li>

存储库......

using System;
using System.Linq;

namespace Draggable
{
    public partial class ItemRepository
    {
        DatabaseDataContext database = new DatabaseDataContext();

        public IQueryable<Item> GetItems()
        {
            var items = from i in database.Items
                        select i;
            return items;
        }
    }
}

和控制器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;

namespace Draggable.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Index/

        public ActionResult Index()
        {
            ItemRepository repository = new ItemRepository();

            return View("Index", repository.GetItems());
        }

        public ActionResult Item()
        {
            return View();
        }

    }
}

这种方法使样式更接近你的样本......但它确实不起作用。它没有获得元素的id - 但是使元素本身可以排序似乎也不起作用....

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Draggable.Item>>" %>

<asp:Content ContentPlaceHolderID="TitleContent" runat="server">
    Index
</asp:Content>
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Index</h2>
    <div class="itemBox">
        <ul class="itemList">
            <% foreach (var item in Model)
      { %>
            <% Html.RenderPartial("Item", item); %>
            <% } %>
        </ul>
    </div>
    <div class="itemBox">
        <ul class="itemList">
            <p>
                Drop here</p>
        </ul>
    </div>
</asp:Content>
<asp:Content ContentPlaceHolderID="ScriptContent" runat="server">
    <script type="text/javascript">
        $(function() {
            $(".itemList").sortable({
                connectWith: ".itemList",
                containment: "document",
                cursor: "move",
                opacity: 0.8,
                placeholder: "itemRowPlaceholder",

                update: function(event, ui) {
                    //Extract column num from current div id
                    var colNum = $(this).attr("id").replace(/col_/, "");
                    alert(colNum);
                    $.post("/Home/UpdateSortOrder", { columnNum: colNum, sectionIdQueryString: $(this).sortable("serialize") });
                }
            });
        });
    </script>

</asp:Content>

Answer 1

斯泰西 - 我看到你正在引用我的博客并愿意提供帮助。我在一个更大的jquery asp.net mvc拖放项目上写博客，所以我将我的帖子分成几部分，我只有一半左右（到目前为止3个部分）。基本上，你正在寻找的信息还不是全部，但应该很快。

对于初学者，我使用Firebug's logging功能调试事件。以下是使用jQuery UI的sortable（）方法测试事件的示例：

$("#mylist").sortable(
{
    ...
    start: function(event, ui)
    {
        console.log("-- start fired --");
        console.log($(ui.item));
    },

    update: function(event, ui)
    {
        console.log("-- update fired --");
        console.log($(ui.item));
    },

    deactivate: function(event, ui)
    {
        console.log("-- deactivate fired --");
        console.log($(ui.item));
    }
});

使用sortable（）删除项目时，会触发update事件。我使用jQuery的AJAX post方法将数据发送到控制器。

$("#mylist").sortable(
{
    ...
    update: function(event, ui)
    {
        //Extract column num from current div id
        var colNum = $(this).attr("id").replace(/col_/, "");

        $.post("/Section/UpdateSortOrder",
            { columnNum: colNum, sectionIdQueryString: $(this).sortable("serialize") });

    }
});

变量colNum通过解析在视图中设置的id属性来提取id。请参阅我的博客上的part 3，了解其呈现方式。然后将列号和段ID的集合（在jquery中序列化）发布到控制器。

控制器方法驻留在/Controllers/SectionController.cs中，只接受帖子：

    private SectionRepository secRepo = new SectionRepository();

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult UpdateSortOrder(int columnNum, string sectionIdQueryString)
    {
        string[] separator = new string[2] { "section[]=", "&" };
        string[] sectionIdArray = sectionIdQueryString.Split(separator, StringSplitOptions.RemoveEmptyEntries);

        secRepo.UpdateSortOrder(columnNum, sectionIdArray);
        secRepo.Save();

        return Content("Success");
    }

希望现在有所帮助。

Answer 2

在jQuery UI droppable中，有一个事件“drop”可以执行一个函数。因此，您需要将调用连接到控制器的操作以执行“丢弃”操作。您还可以加入其他事件，例如“out”，“hover”等。有关详细信息，请参阅“事件”下的here。

以下是通过“drop”挂钩/调用控制器操作的示例：

$('#mylist').droppable({
   drop: function(event, ui) {
       var newItem = ui.droppable;
       var url = <% =Url.Action("Append", "MyController") %>;
       $.post(url, { newItemId: newItem[0].id });
   }
});

Answer 3

诚！它已经完成。问题是$（this）.attr（“id”）。它需要是$（ui.item）.attr（“id”）。这将返回被拖动的元素，而不是可排序的容器。非常感谢您的帮助。

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Draggable.Item>>" %>

<asp:Content ContentPlaceHolderID="TitleContent" runat="server">
    Index
</asp:Content>
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <ul id="sortable1" class="connectedSortable">
        <% foreach (var item in Model)
     { %>
        <% Html.RenderPartial("Item", item); %>
        <% } %>
    </ul>
    <ul id="sortable2" class="connectedSortable">
    </ul>
</asp:Content>
<asp:Content ContentPlaceHolderID="ScriptContent" runat="server">
    <style type="text/css">
        #sortable1, #sortable2 {
            list-style-type: none;
            margin: 0;
            padding: 0;
            float: left;
            margin-right: 10px;
        }
        #sortable2 {
            height: 400px;
            width: 140px;
            background: #ccc;
        }
        #sortable1 li, #sortable2 li {
            margin: 0 5px 5px 5px;
            padding: 5px;
            font-size: 1.2em;
            width: 120px;
        }
    </style>

    <script type="text/javascript">
        $(function() {
            $("#sortable1").sortable({
                connectWith: '.connectedSortable'
            }).disableSelection();
            $("#sortable2").sortable({
                connectWith: '.connectedSortable',
                receive: function(event, ui) {
                    var colNum = $(ui.item).attr("id").replace(/col_/, "");
                    $.post("/Home/UpdateSortOrder", { columnNum: colNum, sectionIdQueryString: $(this).sortable("serialize") });
                }
            }).disableSelection();
        });
    </script>
</asp:Content>

jQuery Draggable，Droppable，ASP.NET MVC

3 个答案: