Sortable - Customization

@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", data.value ? { x: 10, y: 20 } : null);

    }

</script>

​