Jquery Group Plugin-CodePudding

Suppose I have a list of paragraphs:

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Paragraph 5

Paragraph 6

Paragraph 7

Paragraph 8

Paragraph 9

Is there a jquery plugin that allows to group paragraphs in boxes (div containers) by dragging? The order should be preserved.

Something like

<div id="group1">
Paragraph 1
Paragraph 2
Paragraph 3
Paragraph 4
Paragraph 5
</div>
<div id="group2">
Paragraph 6
Paragraph 7
Paragraph 8
Paragraph 9
</div>

CodePudding user response：

Is this sort of what your after, its a mix of reorder able individual paragraphs or paragraph groups

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Sortable - Connect lists</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <style>
      #sortable1,
      #sortable2,
      #sortable3 {
        border: 1px solid #eee;
        width: 142px;
        min-height: 20px;
        list-style-type: none;
        margin: 0;
        padding: 5px 0 0 0;
        float: left;
        margin-right: 10px;
      }

    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <script>
      $(function() {
        $("#sortable1, #sortable2, #sortable3").sortable({
          connectWith: ".connectedSortable"
        }).disableSelection();
      });

    </script>
  </head>

  <body>


    <div id="sortable1" >
      <p >Paragraph 1</p>
      <p >Paragraph 2</p>
      <p >Paragraph 3</p>
      <p >Paragraph 4</p>
      <p >Paragraph 5</p>
    </div>

    <div id="sortable2" >
      <p >
        Group 2 <br />
        Paragraph 6
        Paragraph 7
        Paragraph 8
        Paragraph 9
        Paragraph 10
      </p>
    </div>
    <div id="sortable3" >
      <p >
        Group 3 <br />
        Paragraph 11
        Paragraph 12
        Paragraph 13
        Paragraph 14
        Paragraph 15
      </p>
    </div>



  </body>

</html>

there is also : https://www.jqueryscript.net/tags.php?/Drag/

I hope it helps