Jquery Sortable not functioning as expected-CodePudding

I am trying to setup nested DIVs to be sortable with JQuery, but it does not work. Below is the code I am using and here is the link to JSFiddle

<div >
  <div >
    test 01
  </div>
  <div >
    <div >
      test 02
    </div>
    <div >
      <div >
        test 03
      </div>
       <div >
        <div >
          test 04
        </div>
      </div>
    </div>
  </div>
</div>

$(".moveDvi").sortable({
connectwith: ".noMove",
placeholder: "placeHolder",
});

CodePudding user response：

You have a typo in your code: connectwith should be connectWith. connectWith is used to specify which lists can the current list be connected with. So it should typically point to a container and not individual items. You'll need to include both jQuery and jQuery UI libraries for this to work. If you want to make nested items sortable, you might want to initialize sortable on the container elements, not just the items.

<html>
          <head>
            <link
              rel="stylesheet"
              href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
            />
            <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>
            <style>
              .lay01 {
                margin-left: 10px;
              }
        
              .placeHolder {
                border-style: dashed;
                border-color: #e09d9d;
                height: 15px;
              }
            </style>
          </head>
          <body>
            <div >
              <div >test 01</div>
              <div >
                <div >test 02</div>
                <div >
                  <div >test 03</div>
                  <div >
                    <div >test 04</div>
                  </div>
                </div>
              </div>
            </div>
          </body>
          <script>
            $(".sortableContainer").sortable({
              items: ".moveDvi",
              connectWith: ".sortableContainer",
              placeholder: "placeHolder",
            });
          </script>
        </html>