jQuery可拖动、可拖放、ASP.NET MVC

我已经阅读了很多关于jQuery draggable/droppable的教程，并试图将其应用于ASP.NET MVC，但我真的很困惑

我一直在寻找的大多数样本似乎都很难理解，至少它与连线的位置有关。我基本上是想有一个目标框（“名册”）和一个单位列表（“与会者”）。目标是能够将任何单位拖动到框中，并将其添加到数据库中的花名册中

有没有人知道一些简单的示例可以帮助我们了解如何将jQuery的这一部分与ASP.NET MVC结合使用

例如，我一直在看，它很整洁，但它不能解释我需要什么。这没有多大意义，而且大部分代码都非常杂乱无章，我甚至无法追踪某些调用是在哪里进行的，以找出它们是如何连接的。（例如，jQuery是如何调用控制器操作的，以在删除某个对象时触发该操作的？如何获取被拖动对象的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>

---

这种方法使样式更接近您的示例……但它确实不起作用。它没有得到元素的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>

指数
指数




到这里来


$（函数（）{
$（“.itemList”）.sortable({
连接到：“.itemList”，
遏制：“文件”，
光标：“移动”，
不透明度：0.8，
占位符：“itemRowPlaceholder”，
更新：功能（事件、用户界面）{
//从当前div id提取列num
var colNum=$（this.attr（“id”）.replace（/col_u/，“”）；
警报（colNum）；
$.post（“/Home/updatesortororder”，{columnNum:colNum，sectionIdQueryString:$（this）.sortable（“serialize”）}）；
}
});
});

在jQuery UI droppable中，有一个事件“drop”，可以执行一个函数。因此，在这里，您需要将调用连接到控制器的操作，以便在“drop”上执行某些操作。您还可以挂接其他事件，如“退出”、“悬停”等。有关详细信息，请参阅“事件”下的

下面是一个通过“drop”钩住/调用控制器操作的示例：

$（'#mylist'）。可拖放({
drop：函数（事件、用户界面）{
var newItem=ui.droppable；
var url=；
$.post（url，{newItemId:newItem[0].id}）；
}
});

Stacey-我看到你在引用我的博客，很乐意帮忙。我正在写一个更大的jQueryASP.NETMVC拖放项目的博客，所以我把我的文章分成了几个部分，我只写了一半（到目前为止有3部分）。基本上，你正在寻找的信息还没有全部出现，但应该很快就会出现

对于初学者，我使用该特性调试事件。下面是使用jQuery UI的sortable（）方法测试事件的示例：

使用sortable（）删除项目时，将触发更新事件。我使用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。请参阅我的博客上的内容，了解如何呈现此内容。然后将列号和节id集（在jquery中序列化）发布到控制器

$("#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") });

    }
});

控制器方法位于/Controllers/SectionController.cs中，仅接受POST：

    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");
    }

---

希望现在能有所帮助。

Zing！已经完成了。问题是$（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>

指数




#排序1，#排序2{
列表样式类型：无；
保证金：0；
填充：0；
浮动：左；
右边距：10px；
}
#可排序的2{
高度：400px；
宽度：140px；
背景：#ccc；
}
#可排序1 li，#可排序2 li{
保证金：0 5px 5px 5px；
填充物：5px；
字体大小：1.2米；
宽度：120px；
}
$（函数（）{
$（“#可排序1”）。可排序({
connectWith:“.connectedSortable”
}).disableSelection（）；
$（“#可排序2”）。可排序({
connectWith:“.connectedSortable”，
接收：功能（事件、用户界面）{
var colNum=$（ui.item）.attr（“id”）.replace（/col_u/，”）；
$.post（“/Home/updatesortororder”，{columnNum:colNum，sectionIdQueryString:$（this）.sortable（“serialize”）}）；
}
}).disableSelection（）；
});

这是一个很大的挑战。你领先我太远了，我都迷路了。但是我会看看我是否能跟上-所以我基本上想在视图中存储每个项目的ID？因此，您将HTML id元素设置为col#####其中##是“id”，这就是您通过jQuery传递的内容？请原谅，Phil，我已经尝试了您的代码，我仍然很困惑。我是jQuery的新手。我不是真的想改变顺序，我只是想基本上把项目添加到列表中。你知道什么时候你可能会出版更多这样我才能继续研究吗

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

$("#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));
    }
});

$("#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") });

    }
});

    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");
    }

<%@ 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>