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",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_/,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","");
                    alert(colNum);
                    $.post("/Home/UpdateSortOrder",sectionIdQueryString: $(this).sortable("serialize") });
                }
            });
        });
    </script>

</asp:Content>