jQuery UI Sortable event

[JaySeanH]

<section id="sectionnow" class="jumbotron">
    <div class="wholedashboard">
        <div class="row2">
            <div class="sortable contacts">
                <div class="col-sm-6 text-left"> <h2>My Contacts <a href="contact" class="addcontact"> Add Contact </a> </h2> <div class="contactcontent"><p id="hello"></p></div> </div>
                <div class="col-sm-6 text-right"> <h2>Documents</h2><div class="contactcontent"><p id="hello"></p></div> </div>
            </div>
        </div>
        <div class="row2">
            <div class="sortable Bills">
                <div class="col-sm-12"> <h2>Bills</h2><div class="contactcontent"><p id="hello"></p></div></div>
            </div>
        </div>
        <div class="row2">
            <div class="sortable bottomthree">
                <div class="col-sm-4 text-left"> <h2>Notes <a href="#" class="addcontact"> Update Notes </a> </h2><div class="contactcontent"><p id="hello"></p></div> </div>
                <div class="col-sm-4 text-center"> <h2>Clients</h2><div class="contactcontent"><p id="hello"></p></div></div>
                <div class="col-sm-4 text-right"><h2>Key Dates <a href="#" class="addcontacts"> New Key Date </a> </h2><div class="contactcontent"><p id="hello"></p></div></div>
            </div>
        </div>
    </div>
</section>

<script>
    $(document).ready(function () {
        $('.sortable').sortable({ connectWith: '.sortable' });
    });
</script>

So I have made a dashboard for a website in work and I want to make each div separately sortable. I have managed to do this and get them swapping position from side to side by dragging them, however I do not know how to get the div to swap positions with the div's below, or above them on the page. Any help would be appreciated

 

[Weasel]

I don't really understand what you need help with, could you be a bit more clear about your issue, and maybe provide some screenshots?

 

[JaySeanH]

I don't really understand what you need help with, could you be a bit more clear about your issue, and maybe provide some screenshots?

Sorry only just seen your response, I managed to solve this, I just wanted to make my boxes sortable,they were only swapping in the divs they were in, turned out It was an easy fix and I just didn't look properly, cheers for the reply

 

[Weasel]

Sorry only just seen your response, I managed to solve this, I just wanted to make my boxes sortable,they were only swapping in the divs they were in, turned out It was an easy fix and I just didn't look properly, cheers for the reply

No problem. Do you want to post your fixed code so when others face a similair problem, they know how to solve it too?

 

[JaySeanH]

No problem. Do you want to post your fixed code so when others face a similair problem, they know how to solve it too?

Yeah sure, for anyone seeing this who may come across a similar problem, then the fix between the code above and this is that I deleted the divs with the class's of 'row' and the divs with the class's 'sortable' so it looks like this...

    <div class="dashwhole">       
            
                <div id="clienttab" class="col-sm-4 text-left"> <h2>Clients <a href="contact" class="addcontact"> Add Contact </a> </h2> <div class="contactcontent"><p id="hello"></p></div> </div>
                <div class="col-sm-8 text-right"> <h2>Expenses <a href="Expenses" class="addcontacts"> Add Expense </a></h2><div class="contactcontent"><p id="hello"></p></div> </div>
        
          
                <div class="col-sm-12"> <h2>Bills</h2><div class="contactcontent"><p id="hello"></p></div></div>
                    
          
                <div id="notestab" class="col-sm-4 text-left"> <h2>Notes <a href="#" class="addcontact"> Update Notes </a> </h2><div class="contactcontent"><p id="hello"></p></div> </div>
                <div class="col-sm-4 text-center"> <h2>Documents</h2><div class="contactcontent"><p id="hello"></p></div></div>
                <div class="col-sm-4 text-right"><h2>Key Dates <a href="#" class="addcontacts"> New Key Date </a> </h2><div class="contactcontent"><p id="hello"></p></div></div>
                
    </div>

And then just simplified the jQuery as it did not need to connect, so that has been changed to...

  $(document).ready(function () {
        $(".dashwhole").sortable();
    });

(This was an easy fix It was just me not opening my eyes properly)

 

[Weasel]

Thanks for providing the fix, glad you figured it out! I'll close this thread now.