locked
MVC drag and drop lists and items RRS feed

  • Question

  • User536624004 posted

    MVC C# .Net Framework 4.6.1 
    There are 3 lists, and I want the user to be able to drag and drop any of the 3 lists in any order AND drag and drop any item in any list in any order, but each item must stay in its list.

    <ul id="List1">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
    </ul>
    <ul id="List2">
     <li>Item A</li>
     <li>Item B</li>
     <li>Item C</li>
     <li>Item D</li>
    </ul>
    <ul id="List3">
     <li>Item Red</li>
     <li>Item Green</li>
     <li>Item Blue</li>
     <li>Item Yellow</li>
    </ul>


    So a user can drag and drop List3 to the first position and then in List2 move Item B to first position in List2. User can never move an item from one list to another, so I DON'T want the user to move "Item Red" into List1 or List2 it should always be in List3 Also what is the code to get the result after the user clicks submit?

    Sunday, February 28, 2021 11:24 AM

All replies

  • User475983607 posted

    Find a draggable JavaScript library that fits your application design.  Use Google...

    https://jqueryui.com/draggable/

    https://www.w3schools.com/howto/howto_js_draggable.asp

    https://mdbootstrap.com/docs/standard/plugins/drag-and-drop/

    It is up to you to write code that captures the element sort order on the page.  It should be as simple as subscribing to a drag event and updating the sort value.

    Sunday, February 28, 2021 12:03 PM
  • User536624004 posted

    I know, I went to those sites before I posted my question. Your first two links show how to drag and drop one element. Your third link won't show the code unless I pay the website for a membership. I want to drag and drop several lists and the items within each list. 

    This is the closest link I found to what I want: https://jqueryui.com/sortable/

    I will put together a prototype and then update this thread.

    Sunday, February 28, 2021 7:09 PM
  • User536624004 posted

    After spending a lot of time trying to get ttps://jqueryui.com/sortable/ to work... It just didn't work for me, tried different browsers, it did nothing.

    So I went back to googling and went to lots of dead ends, finally found this link that seems to be right for me, https://stackoverflow.com/questions/16199266/saving-a-reordered-list-item-from-an-mvc-view-model

    However "easy" and "should be basic" most of the time does not happen to me. So here is my code that still doesn't work. When I click on any element I get a mouse cursor with a circle and line through it, meaning you can't move that element.

    @{
        Layout = "";
    }
    <!doctype html>
    <html lang="en">
    <head>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#CustomList1").sortable().disableSelection();
            });
        </script>
    </head>
    <body>
        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()
            <div class="CustomList" id="1">
                <div class="CustomList1" id="1">Item 1</div>
                <div class="CustomList1" id="2">Item 2</div>
                <div class="CustomList1" id="3">Item 3</div>
            </div>
            <br />
            <div class="CustomList" id="2">
                <div class="CustomList2" id="1">Item A</div>
                <div class="CustomList2" id="2">Item B</div>
                <div class="CustomList2" id="3">Item C</div>
            </div>
            <br />
            <div class="CustomList" id="3">
                <div class="CustomList3" id="1">Item A</div>
                <div class="CustomList3" id="2">Item B</div>
                <div class="CustomList3" id="3">Item C</div>
            </div>
            <br />
            <button type="submit" name="btnSubmit" value="btnSubmit">Submit</button>

        }
    </body>
    </html>

    namespace DragAndDrop.Controllers
    {
        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                return View();
            }

            [HttpPost]
            public ActionResult Index(int[] CustomList)
            {
                return View();
            }
        }
    }

    CustomList comes back as null.

    Also I have tried several id names, nothing happens
    $("#CustomList").sortable().disableSelection();
    $("#CustomList1").sortable().disableSelection();
    $("#CustomList2").sortable().disableSelection();

    Sunday, February 28, 2021 8:41 PM
  • User-474980206 posted

    You should learn jquery selector syntax, which matches css selectors. You are trying to select class names by ID syntax. Also numbers are not valid ID prefixes. You should learn basic html.

    Monday, March 1, 2021 12:43 AM
  • User1686398519 posted

    Hi LoganJH, 

    1. It is recommended that you use F12 in your browser to open the console to see if there are errors.
    2. Regarding the HTML id attribute, you can click this link to learn more.
      • It also introduces the difference between Class and ID.
    3. Regarding how to use Sortable, you need:
      1. According to the code you provided: you are not using the layout view, then you need to reference the jquery file and the jquery-ui file.
        • If there is no jquery-ui file in your project, you can install jQuery.UI.Combined through nuget.
      2. $("#CustomList").sortable().disableSelection();
        • Your jquery selection is incorrect:
          1. CustomList is the class name, so you need to write like this:
            • $(".CustomList")
      3. Here is the complete code:
        • @{
              ViewBag.Title = "Index";
              Layout = null;
          }
          <h2>Index</h2>
          <div class="CustomList" id="sortable1">
              <div class="CustomList1" id="1">Item 1</div>
              <div class="CustomList1" id="2">Item 2</div>
              <div class="CustomList1" id="3">Item 3</div>
          </div>
          <br />
          <div class="CustomList" id="sortable2">
              <div class="CustomList2" id="1">Item A</div>
              <div class="CustomList2" id="2">Item B</div>
              <div class="CustomList2" id="3">Item C</div>
          </div>
          <br />
          <div class="CustomList" id="sortable3">
              <div class="CustomList3" id="1">Item A1</div>
              <div class="CustomList3" id="2">Item B1</div>
              <div class="CustomList3" id="3">Item C1</div>
          </div>
          <script src="~/Scripts/jquery-3.4.1.min.js"></script>
          <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
          <script>
              $("div[id^='sortable']").sortable();
              $("div[id^='sortable']").disableSelection();
              //Or :The second solution
              //$(".CustomList").sortable();
              //$(".CustomList").disableSelection();
          </script>

    Here is the result. 

    Best Regards,

    YihuiSun

    Monday, March 1, 2021 9:46 AM