sort by drag and drop list with jquery UI

Question

I have the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery-ui.js"></script>
        <script type="text/javascript" src="js/scripts.js"></script>            
    </head>
<style>
    #sortable{ list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
    #sortable li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; width: 250px; }
    .wrp {font-size:12px;}
    #sortable {background:red;}
</style>
<body>
<div class="wrp">
<ol id="sortable" class="connectedSortable">
        <li id="0"><div>Start</div>
        <li id="1"><div>TOC</div>
        </li>
            <li id="2">
                <div>Category1</div>
                        <ol id="category" class="category">
                            <li id="3"><div>Sub-category1.1</div>
                            </li><li id="4" ><div>Sub-category1.2</div>
                                    <ol id="sub_category" class="sub_category">
                                        <li id="5" class="item">Item1.2.1</li>
                                        <li id="6" class="item">Item1.2.2</li>
                                    </ol>
                            </li><li id="7"><div>Sub-category1.3</div>
                            </li><li id="8"><div>Sub-category1.4</div>
                        </li>
                    </ol>    
            </li>    
    </li></ol>
</div> 
</body>

<script>
 $(function() {
        $( "#sortable" ).sortable({
            connectWith: ".connectedSortable"
        });

        $( "#category" ).sortable();
        $( "#sub_category" ).sortable({
            connectWith: ".category"
        });

});
</script>

Currently I can :

Move category in the same level
Move sub category
When a category or subcategory is moved, all of its item are moved with it.
Move Item in the same level

Could any give me a trick? How can I modified code that: - can move item to other category? example:
I can move item1.2.1 to sub-category1.1

Thanks in advance.

JackArbiter · Accepted Answer · 2013-11-01 16:32:29Z

1

I'm not sure I understand your question but you may have luck trying:

$('#category').append($('#sub_category'));

I know the item will move, but am unsure about its children. You may have to loop through the children, moving them as you go. Or this may be totally off from what you were wanting.

edited Nov 1, 2013 at 16:32

answered Nov 1, 2013 at 15:59

JackArbiter

5,8252 gold badges29 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jade · Accepted Answer · 2013-11-01 15:58:56Z

0

It's because the sub-items in sub-category1.2 are all wrapped in the same li tag. Also, why are you using such an old version of javascript?

answered Nov 1, 2013 at 15:58

Jade

6516 silver badges14 bronze badges

Collectives™ on Stack Overflow

sort by drag and drop list with jquery UI

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related