Question

我有两个连接的元素，一个是侧边栏元素，另一个是表示数据的图表或对象。如果侧边栏重新排序，则应使用侧边栏元素重新排序相应的连接对象。那就是问题所在。两个物体将一起移动但不会移动或卡入到位。他们将回到原来的位置。我希望能够重新排序侧边栏和相应的图表或对象，使其在页面上以正确的位置重新排序。我将提供以下代码：

$(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>

连接两个可拖动的可排序对象

0 个答案: