Drag and Drop list items

4 Mar 20257 minutes to read

In ListView control, we don’t have drag and drop support. But we can achieve this requirement using TreeView control with ListView appearance.

Drag and Drop in TreeView control was enabled by setting allowDragAndDrop to true.

<ejs-treeview id="element"  allowDragAndDrop="true" >
    <e-treeview-fields dataSource="ViewBag.dataSource" id="id" text="text"></e-treeview-fields>
</ejs-treeview>

The TreeView control is used to represent hierarchical data in a tree like structure. So, list items in TreeView can be dropped to child of target element. we can prevent this behaviour by cancelling the nodeDragStop and nodeDragging events.

<ejs-treeview id="element"  allowDragAndDrop="true" nodeDragging="onDragStop" nodeDragStop="onDragStop">
    <e-treeview-fields dataSource="ViewBag.dataSource" id="id" text="text"></e-treeview-fields>
</ejs-treeview>

function onDragStop(args) {
    //Block the Child Drop operation in TreeView
   var  draggingItem = document.getElementsByClassName("e-drop-in");
    if (draggingItem.length == 1) {
        draggingItem[0].classList.add('e-no-drop');
        args.cancel = true;
    }
}

In the below sample, we have rendered draggable list items.

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Lists;

<ejs-treeview id="element"  allowDragAndDrop="true" nodeDragging="onDragStop" nodeDragStop="onDragStop">
    <e-treeview-fields dataSource="ViewBag.dataSource" id="id" text="text"></e-treeview-fields>
</ejs-treeview>
<style>
    #element.e-treeview .e-ul {
        padding: 0;
    }

    #element.e-treeview .e-list-item {
        padding: 0 16px;
    }

    #element.e-treeview .e-text-content {
        padding: 0;
    }

    #element.e-treeview .e-fullrow {
        height: 36px;
    }

    #element.e-treeview .e-list-text {
        line-height: 34px;
    }

    #element.e-treeview .e-list-item:last-child {
        margin-bottom: 9px;
    }

    #element.e-treeview .e-list-item:first-child {
        margin-top: 9px;
    }
</style>
<script>
    function onDragStop(args) {
        //Block the Child Drop operation in TreeView
        var draggingItem = document.getElementsByClassName("e-drop-in");
        if (draggingItem.length == 1) {
            draggingItem[0].classList.add('e-no-drop');
            args.cancel = true;
        }
    }
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Navigations;

namespace WebApplication1.Controllers
{
    public class ListViewController : Controller
    {
        public IActionResult list()
        {   
            List<object> listdata = new List<object>();
            listdata.Add(new
            {
                text = "Hennessey Venom",
                id = "list-01"

            }); listdata.Add(new
            {
                text = "Bugatti Chiron",
                id = "list-02"

            }); listdata.Add(new
            {
                text = "Bugatti Veyron Super Sport",
                id = "list-03"

            }); listdata.Add(new
            {
                text = "SSC Ultimate Aero",
                id = "list-04"

            }); listdata.Add(new
            {
                text = "Koenigsegg CCR",
                id = "list-05"

            }); listdata.Add(new
            {
                text = "McLaren F1",
                id = "list-06"
            }); listdata.Add(new
            {
                text = "Aston Martin One- 77",
                id = "list-07"
            }); listdata.Add(new
            {
                text = "Jaguar XJ220",
                id = "list-08"
            }); listdata.Add(new
            {
                text = "McLaren P1",
                id = "list-09"
            }); listdata.Add(new
            {
                text = "Ferrari LaFerrari",
                id = "list-10"
            });
            ViewBag.dataSource = listdata;
            return View();
        }       
    }
}