Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@model IEnumerable<DevExtreme.MVC.Demos.Models.TreeList.EmployeeTask>
<div id="demo-container">
<div class="widget-container">
@(Html.DevExtreme().ScrollView()
.ID("scroll")
.Direction(ScrollDirection.Vertical)
.ShowScrollbar(ShowScrollbarMode.Always)
.Content(
Html.DevExtreme().Sortable()
.ID("list")
.MoveItemOnDrop(true)
.Content(@<text>
@foreach(var task in Model) {
<div class="item dx-card">
@task.Task_Subject
</div>
}
</text>).ToString()
)
)
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Drop Feedback Mode:</span>
@(Html.DevExtreme().SelectBox()
.DataSource(new string[] { "push", "indicate" })
.Value("push")
.InputAttr("aria-label", "Drop Feedback Mode")
.OnValueChanged("dropFeedbackMode_changed")
)
</div>
<div class="option">
<span>Item Orientation:</span>
@(Html.DevExtreme().SelectBox()
.DataSource(new string[] { "vertical", "horizontal" })
.Value("vertical")
.InputAttr("aria-label", "Orientation")
.OnValueChanged("itemOrientation_changed")
)
</div>
<div class="option">
<span>Drag Direction:</span>
@(Html.DevExtreme().SelectBox()
.ID("drag-direction")
.DataSource(new string[] { "both", "vertical" })
.Value("both")
.InputAttr("aria-label", "Drag Direction")
.OnValueChanged("dragDirection_changed")
)
</div>
<div class="option">
<span>Scroll Speed:</span>
@(Html.DevExtreme().NumberBox()
.Value(30)
.InputAttr("aria-label", "Scroll Speed")
.OnValueChanged("scrollSpeed_changed")
)
</div>
<div class="option">
<span>Scroll Sensitivity:</span>
@(Html.DevExtreme().NumberBox()
.Value(60)
.InputAttr("aria-label", "Scroll Sensitivity")
.OnValueChanged("scrollSensitivity_changed")
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Text("Use Handle")
.OnValueChanged("handle_changed")
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Text("Use Drag Template")
.OnValueChanged("dragTemplate_changed")
)
</div>
</div>
</div>
<script>
function getSortableInstance() {
return $("#list").dxSortable("instance");
}
function dropFeedbackMode_changed(data) {
getSortableInstance().option("dropFeedbackMode", data.value);
}
function itemOrientation_changed(data) {
getSortableInstance().option("itemOrientation", data.value);
$("#scroll").toggleClass("horizontal", data.value === "horizontal");
$("#scroll").dxScrollView({
direction: data.value
});
$("#drag-direction").dxSelectBox({
value: "both",
inputAttr: { 'aria-label': 'Drag Direction' },
items: ["both", data.value]
});
}
function dragDirection_changed(data) {
getSortableInstance().option("dragDirection", data.value);
}
function scrollSpeed_changed(data) {
getSortableInstance().option("scrollSpeed", data.value);
}
function scrollSensitivity_changed(data) {
getSortableInstance().option("scrollSensitivity", data.value);
}
function handle_changed(data) {
if (data.value) {
$(".item").append("<i class='dx-icon dx-icon-dragvertical handle'></i>");
} else {
$(".item").children("i").remove();
}
$(".item").toggleClass("item-with-handle", data.value);
getSortableInstance().option("handle", data.value ? ".handle" : "");
}
function dragTemplate(options) {
return $("<div>")
.addClass("item dx-card")
.css({ fontWeight: "bold", width: 200, padding: 10 })
.text(options.itemElement.text());
}
function dragTemplate_changed(data) {
getSortableInstance().option("dragTemplate", data.value ? dragTemplate : null);
getSortableInstance().option("cursorOffset", e.value ? { x: 10, y: 20 } : null);
}
</script>
using DevExtreme.MVC.Demos.Models.SampleData;
using DevExtreme.MVC.Demos.ViewModels;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class SortableController : Controller {
public ActionResult Customization() {
return View(SampleData.EmployeeTasks.Where(task => task.Task_Parent_ID != 0));
}
}
}
.widget-container {
margin-right: 320px;
}
#scroll {
height: 500px;
}
#scroll.horizontal {
margin-top: 170px;
display: block;
width: auto;
height: auto;
white-space: nowrap;
}
.handle {
position: absolute;
left: 4px;
top: 10px;
font-size: 18px;
line-height: 19px;
cursor: move;
}
.horizontal .handle {
margin-right: 10px;
}
.item {
color: var(--dx-color-text);
background-color: var(--dx-component-color-bg);
box-sizing: border-box;
position: relative;
padding: 10px 20px;
margin-bottom: 10px;
cursor: pointer;
}
.item-with-handle {
padding-left: 30px;
cursor: default;
}
.horizontal .item {
display: inline-block;
width: 200px;
height: 100px;
margin-bottom: 0;
margin-right: 10px;
white-space: normal;
}
.options {
padding: 20px;
position: absolute;
bottom: 0;
right: 0;
width: 260px;
top: 0;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}
-
dropFeedbackMode
Specifies how to highlight the item's drop position. -
itemOrientation
Notifies the Sortable about item layout so that it can properly re-position items or the drop indicator during drag and drop. -
dragDirection
Specifies the directions in which an item can be dragged. -
scrollSpeed
Specifies the scrolling speed when dragging an item beyond the viewport. -
scrollSensivity
Specifies the distance in pixels from the edge of viewport at which scrolling should start.
The value should not be more than half the Sortable's height or width depending on items' orientation. -
handle
Specifies an element that should act as a drag handle for an item. A CSS selector (id or class) is used to reference the element. If not specified, users can drag any part of the item. -
dragTemplate
Specifies custom markup to be shown instead of the item being dragged.