jQuery, Перемещаемый, Сбрасываемый, ASP.NET MVC
Первые вещи сначала, я не хотел бы это как пользователь.
лучший способ сделать, вероятно, использует маленький апплет флэш-памяти, который играет Ваш звук в фоновом режиме.
Также ответил здесь: Межплатформенный, перекрестный браузер способ играть звук из JavaScript?
3 ответа
Стейси - Я вижу, вы ссылаетесь на мой блог и хотели бы вам помочь. Я веду блог в более крупном проекте перетаскивания jquery asp.net mvc, поэтому я разделил свои сообщения на части, и я только примерно на полпути (пока 3 части). В основном, информация, которую вы ищете, еще не вся, но скоро должна быть.
Для начала, я отлаживаю события, используя функцию ведения журнала Firebug . Вот пример тестирования событий с помощью метода sortable () jQuery UI:
$("#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 (), он запускает событие обновления. Я использую метод 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, установленного в представлении. См. часть 3 в моем блоге, чтобы узнать, как это отображается.
Zing! It has been done. The problem was $(this).attr("id"). It needed to be $(ui.item).attr("id"). This returns the element being dragged, rather than the sortable container. Thank you SO much for all of your help.
<%@ 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>
In jQuery UI droppable, there is an event "drop" that can take a function to execute. So this is where you will need to wire the call to your controller's action to execute something on a "drop". There are other events as well that you can hook into, such as "out", "hover" etc. See here under "Events" for more detail.
Here is an example in hooking/calling your controller's action via "drop":
$('#mylist').droppable({
drop: function(event, ui) {
var newItem = ui.droppable;
var url = <% =Url.Action("Append", "MyController") %>;
$.post(url, { newItemId: newItem[0].id });
}
});