Я использовал JQuery.UI. Это не обязательно ответ на этот вопрос (тем более, что это старый пост), но я подумал, что поделюсь тем, что у меня есть, на случай, если это кому-нибудь поможет, когда я пришел в этот пост в поисках создания перетаскивания UI.
Обратите внимание, что это для MVC.
Обратите внимание , что к этому еще не добавлена действительная функциональность, это отправная точка, которая создает пользовательский интерфейс, позволяющий перетаскивать и перетаскивать элементы:
Компоновка:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
ul.listRoles {
width: 300px;
height: auto;
padding: 5px;
margin: 5px;
list-style-type: none;
border-radius: 5px;
min-height: 70px;
}
ul.listRoles li {
padding: 5px;
margin: 10px;
background-color: #ffff99;
cursor: pointer;
border: 1px solid Black;
border-radius: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#listDenyRoles, #listAllowRoles, #listAllowMoreRoles").sortable({
connectWith: ".listRoles"
}).disableSelection();
});
function submitNewRoles() {
//Generate List of new allow roles
var outputList = $("#listAllowRoles li").map(function () { return $(this).html(); }).get().join(',');
$("#GrantRoles").val(outputList);
$("#formAssignRoles").submit();
}
</script>
</head>
<body>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
}
</body>
</html>
Страница указателя (я заменил индекс дома этим кодом):
@{
ViewBag.Title = "Home Page";
}
<p>
To GRANT a user a role, click and drag a role from the left Red box to the right Green box.<br />
To DENY a user a role, click and drag a role from the right Green box to the left Red box.
</p>
@using (Html.BeginForm("AssignRoles", "UserAdmin", FormMethod.Post, new { id = "formAssignRoles" }))
{
String[] AllRoles = ViewBag.AllRoles;
String[] AllowRoles = ViewBag.AllowRoles;
if (AllRoles == null) { AllRoles = new String[] { "Test1","Test2","Test3","Test4", "Test5", "Test6", "Test7", "Test8", "Test9", "Test10", "Test11", "Test12", "Test13" }; }
if (AllowRoles == null) { AllowRoles = new String[] { }; }
@Html.ValidationSummary(true)
<div class="jumbotron">
<fieldset>
<legend>Drag and Drop Roles as required;</legend>
@Html.Hidden("Username", "Username")
@Html.Hidden("GrantRoles", "")
<table>
<tr>
<th style="text-align: center">
Deny Roles
</th>
<th style="text-align: center">
Allow Roles
</th>
</tr>
<tr>
<td style="vertical-align: top">
<ul id="listDenyRoles" class="listRoles" style="background-color: #cc0000;">
@foreach (String role in AllRoles)
{
if (!AllowRoles.Contains(role))
{
<li>@role</li>
}
}
</ul>
</td>
<td style="vertical-align: top">
<ul id="listAllowRoles" class="listRoles" style="background-color: #00cc00;">
@foreach (String hasRole in AllowRoles)
{
<li>@hasRole</li>
}
</ul>
</td>
<td style="vertical-align: top">
<ul id="listAllowMoreRoles" class="listRoles" style="background-color: #000000;">
@foreach (String hasRole in AllowRoles)
{
<li>@hasRole</li>
}
</ul>
</td>
</tr>
</table>
<p><input type="button" onClick="submitNewRoles()" value="Assign Roles" /></p>
</fieldset>
</div>
}
Надеюсь, это может помочь кому-то еще в правильном направлении.