CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-sortable
SrgHartman
SrgHartman

Reputation: 651

Can't make divs sortable between each other, but can sort elements within them

Fiddle is here.

I have a container editor that contains 4 divs.

Each one of these divs should be sortable between each other.

They also contain paragraph elements within them which are sortable. The javascript I'm using is this:

jQuery('.sortable').sortable({
        placeholder: "ui-state-highlight",
        connectWith: ".sortable"
    });

I can sort the paragraphs and even drag them outside the divs(this is correct behavior).

However I can't sort the divs between each other. When I try to sort a div they inevitably end up within each other or disappear altogether.

How can I fix this problem?

Upvotes: 3

Views: 816

Answers (1)

Shiladitya
Shiladitya

Reputation: 12181

Here you go with a solution https://jsfiddle.net/xovnxags/1/

$('.sortable').sortable({
    placeholder: "ui-state-highlight",
    connectWith: ".sortable"
});

$('.psortable').sortable({
    placeholder: "ui-state-highlight",
    connectWith: ".psortable"
});
.sortable .row{
  background-color: yellow;
  border-style: dashed;
  border-width: 2px;
  margin-top:20px;
}
    
.sortable p {
  height:30px;
}

#editor {
  background-color:cornflowerblue;
  border-width:2px;
  border-style:dashed;
}    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 

<div id="editor" class="sortable">

    <div class="psortable row">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
    </div>
    
    <div class="psortable row">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
    </div>
    
    <div class="psortable row">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
    </div>
    
    <div class="psortable row">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
    </div>
    
</div>

You need to have two sortable method, one for outer div & another for paragraph.

I've provide different className to paragraph as .psortable.

Updated Solution Here you go with a jsfiddle link https://jsfiddle.net/xovnxags/2/

$('.sortable').sortable({
  placeholder: "ui-state-highlight",
  connectWith: ".sortable"
});

$('.psortable').sortable({
  placeholder: "ui-state-highlight",
  connectWith: ".sortable"
});
.sortable .row{
  background-color: yellow;
  border-style: dashed;
  border-width: 2px;
  margin-top:20px;
}
    
.sortable p {
  height:30px;
}

#editor {
  background-color:cornflowerblue;
  border-width:2px;
  border-style:dashed;
}    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 

<div id="editor" class="sortable">

    <div class="psortable row">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
    </div>
    
    <div class="psortable row">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
    </div>
    
    <div class="psortable row">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
    </div>
    
    <div class="psortable row">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
    </div>
    
</div>

Hope this will help you.

Upvotes: 3

Related Questions