は互いの間のdiv要素がソート可能にすることはできませんが、それら

Question

Fiddle is here.

私は4つのdiv要素が含まれているコンテナエディタを持っている内の要素を並べ替えることができます。

これらのdivのそれぞれは、相互にソート可能である必要があります。

これらにはソート可能な段落要素も含まれています。私が使用しているjavascriptのはこれです：

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

私は段落をソートしても、（これが正しい動作です）のdivの外にドラッグすることができます。

しかし、私はお互いの間のdivをソートすることはできません。私がdivをソートしようとすると、彼らは必然的にお互いの中で終わるか、まったく消えます。

この問題を解決するにはどうすればよいですか？

Answer 1

ここでは、解決策次の2つのソート可能な方法で、paragraphのための別の& div外のための1つを持っている必要があり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>

で行きます。

className〜paragraphを.psortableとして提供しました。ソリューション 更新

ここではjsfiddleリンク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>

これはあなたを助けることを願って行きます。