jQuery Draggable，Droppable，ASP.NET MVC
我一直在浏览很多关于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>" %> Index Index
Drop here
#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; } $(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") }); } }); }); 好吧，我正在努力遵循菲尔的指示，这就是我到目前为止所做的……我希望我能走上正轨。 这对我来说都很新鲜。 我正在努力尝试，但’更新’的东西永远不会被解雇。 。 。
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable>" %> Index Index
.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; } $(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") }); } }); });
还有Item.ascx
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> <li class="itemRow" id="item_"> Drag me to my target
和存储库……
using System; using System.Linq; namespace Draggable { public partial class ItemRepository { DatabaseDataContext database = new DatabaseDataContext(); public IQueryable 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>" %> Index Index
Drop here
$(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") }); } }); });
史黛西 – 我看到你正在引用我的博客并愿意提供帮助。 我正在写一个更大的jquery asp.net mvc拖放项目的博客，所以我将我的post分成几部分，我只有一半左右（到目前为止3个部分）。 基本上，你正在寻找的信息还不是全部，但应该很快。
对于初学者，我使用Firebug的日志记录function调试事件。 以下是使用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。 请参阅我博客上的第3部分 ，了解其呈现方式。 然后将列号和段ID的集合（在jquery中序列化）发布到控制器。
控制器方法驻留在/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"); }
希望现在有所帮助。
在jQuery UI droppable中，有一个事件“drop”可以执行一个函数。 因此，您需要将调用连接到控制器的操作，以便在“drop”上执行某些操作。 您还可以加入其他事件，例如“out”，“hover”等。有关详细信息，请参阅“事件”下的此处 。
以下是通过“drop”挂钩/调用控制器操作的示例：
$('#mylist').droppable({ drop: function(event, ui) { var newItem = ui.droppable; var url = <% =Url.Action("Append", "MyController") %>; $.post(url, { newItemId: newItem[0].id }); } });
尖啸声！ 它已经完成。 问题是$（this）.attr（“id”）。 它需要是$（ui.item）.attr（“id”）。 这将返回被拖动的元素，而不是可排序的容器。 非常感谢您的帮助。
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage>" %> Index <% foreach (var item in Model) { %> <% Html.RenderPartial("Item", item); %> <% } %>