Drag, Drop, Sort into each other as well into parent

Drag, Drop, Sort into each other as well into parent

Hi all This is my first post.

I did do a search and came back with some answers however my question seems to be a little bit more complex (to me at least).

Overview:

I have a group of pages that can have sub pages (only to one level though).

When a user adds a page into the system he/she can choose a parent page it belongs to or if its on its own.
A user can also change its parent when the page is edited as well.

Question:

What i need to do is when the user comes to view a list of pages and their sub pages i need to be able to drag and drop pages into other pages (one level only) and drag pages into the top level.

I have got it sort of working using sortable but its just not right.

I would also like to be able then to get the order of the pages and sub pages to update in the database.

Code:

This is what my list html structure looks like at the moment.



<div id="list-item">

<div id="group_1" class="list-group">

    <div class="list-item-block"><!-- parent page  -->
        <h3>about</h3>
        <ul>
            <li><a href="#" class="edit">edit</a></li>
            <li><a href="#" class="del">delete</a></li>
            <li><a href="#" class="pub">publish</a></li>
        </ul>
    </div>
   
       
    <div class="list-item-block sub-item"><!-- sub page  -->
        <h3>works</h3>
         <ul>
            <li><a href="#" class="edit">edit</a></li>
            <li><a href="#" class="del">delete</a></li>
            <li><a href="#" class="pub">publish</a></li>
        </ul>
    </div>
   
       
    <div class="list-item-block sub-item"><!-- sub page -->
        <h3>works</h3>
         <ul>
            <li><a href="#" class="edit">edit</a></li>
            <li><a href="#" class="del">delete</a></li>
            <li><a href="#" class="pub">publish</a></li>
        </ul>
    </div>
   
</div>

<div id="group_2" class="list-group">

<div class="list-item-block"><!-- parent page  -->
    <h3>about</h3>
    <ul>
        <li><a href="#" class="edit">edit</a></li>
        <li><a href="#" class="del">delete</a></li>
        <li><a href="#" class="pub">publish</a></li>
    </ul>
</div>


<div class="list-item-block sub-item"><!-- sub page -->
    <h3>works</h3>
     <ul>
        <li><a href="#" class="edit">edit</a></li>
        <li><a href="#" class="del">delete</a></li>
        <li><a href="#" class="pub">publish</a></li>
    </ul>
</div>
   
</div>

<div id="group_3" class="list-group">

<div class="list-item-block"><!-- parent page  -->
    <h3>about</h3>
    <ul>
        <li><a href="#" class="edit">edit</a></li>
        <li><a href="#" class="del">delete</a></li>
        <li><a href="#" class="pub">publish</a></li>
    </ul>
</div>

</div>

</div>

Any help or advice would be greatly appreciated. Many thanks