CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortable
tree em
tree em

Reputation: 21701

sort by drag and drop list with jquery UI

Heading

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 :

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.

Upvotes: 0

Views: 1014

Answers (2)

JackArbiter
JackArbiter

Reputation: 5785

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.

Upvotes: 1

Jade
Jade

Reputation: 649

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?

Upvotes: 0

Related Questions