javascript - ドラッグ可能で並べ替え可能な 2 つのオブジェクトの接続

Question

接続されている 2 つの要素があり、1 つはサイドバー要素で、もう 1 つはデータを表すグラフまたはオブジェクトです。サイドバーが並べ替えられた場合、対応する接続​​されたオブジェクトをサイドバー要素で並べ替える必要があります。それが問題だ。両方のオブジェクトは一緒に動きますが、頼ったり、所定の位置にスナップしたりしません。元の位置に戻るだけです。サイドバーと対応するチャートまたはオブジェクトを並べ替えて、ページ上の正しい位置に並べ替えられるようにしたいと考えています。以下のコードを提供します。

$(document).ready(function() {
$( "#sortable" )
.sortable({ handle: ".handle", placeholder: "ui-state-highlight", helper: 'clone'  })   
.find("li")  
.prepend("<div class='handle'><p >&#9776</p></div>" )    
$( "#sortable" ).disableSelection();
});

$(document).ready(function() {
$('#sortable').click(function() {
    var address = $('#sortable').val();      
});
$(document).on('click', '.delete', function() {
    $(this).parent().remove();
});    
$(document).on('click')       
});

$(document).ready(function(){
$('.move-up').click(function(){
    if ($(this).prev()) 
        $(this).parent().insertBefore($(this).parent().prev());
});
$('.move-down').click(function(){
    if ($(this).next())
        $(this).parent().insertAfter($(this).parent().next());
});
});
$(document).ready(function() {
// function to get matching groups (change '.group' and /group.../ inside the match to whatever class you want to use
var getAll = function(t) {
    return $('.group' + t.helper.attr('class').match(/group([0-9]+)/)[1]).not(t);
};
// add drag functionality
$(".dragme").draggable({
    snap: true,
    revert: true,
    containment: "#containment-wrapper",
    axis:"y", 
    revertDuration: 10,
});

<input class="input btn-info" id='toggle' name='toggle' type="button" value="<">
<div id="draggable">
<ul  id="sortable">  

<div class="dragme group1"><li  id="item-1" class="ui-state-default">Executive Summary
    <button class="delete btn-danger" ><p class="icon-remove"></p></button>
    <button class="move-up btn-info"><p class="icon-chevron-up"></p></button><br />
    <button class="move-down btn-info"><p class="icon-chevron-down"></p></button>

</li></div> 
<div class="dragme group2"><li  id="item-2" class="ui-state-default">Company     Performance<button class="delete btn-danger"><p class="icon-remove"></p></button>
    <button class="move-up btn-info"><p class="icon-chevron-up"></p></button> <br />
    <button class="move-down btn-info"><p class="icon-chevron-down"></p></button>
</li></div>


     <div class="span10" id="draggable" style="float: right; width: 75%;">
<div class="row-fluid" ><div class="dragme group1">
<div class="span3"><div class="box style2"><span class="number">115,925</span><p>Total   Impressions</p></div></div>
<div class="span3"><div class="box style2"><span class="number">1,100</span><p>Total Clicks</p></div></div>
<div class="span3"><div class="box style2"><span class="number">102</span><p>Total Leads</p></div></div>
<div class="span3"><div class="box style2"><span class="number">7.2%</span><p>Overall  Conversions</p></div></div>
</div></div>


 <div class="dragme group2"><div class="tab-content" id="white-bg">
                        <div class="tab-pane active" id="impressions">                                                      
                            <div id="chart_div" style=" width: 900px; height: 400px;">   </div>
                        </div>
                   </div>
                    </div>