jQuery UI可排序鏈接元素

我有兩列，每列都有很多行/ div。我試圖讓jQuery UI Sortable以一種方式工作，如果我在左列中拖動一個div，右列中的關聯行/ div也將被排序。jQuery UI可排序鏈接元素

例如，

<html><body> 
    <div class='left-column'> 
    <div class='field' id='left_1'>content 1</div> 
    <div class='field' id='left_2'>content 2</div> 
    <div class='field' id='left_3'>content 3</div> 
    </div> 
    <div class='right-column'> 
    <div class='field' id='right_1'>content 1</div> 
    <div class='field' id='right_2'>content 2</div> 
    <div class='field' id='right_3'>content 3</div> 
    </div> 
</body></html>

至於jQuery的，現在我有，

function linkedSort() { 
    $('.left-column').sortable({ 
    axis: 'y', 
    stop: function(event, ui) { 
     $('.left-column .field').each(function(i, field) { 
     var fieldName = $(field).attr('id'); 
     var fieldNumber = fieldName.substr(fieldName.indexOf('_')+1); 
     // do something here to place it in the right area 
     }); 
    } 
    }); 
};

如果我拖動。左柱.field_2下面.field_3，在.right相應的div柱子也應該重新排列。

謝謝！

來源

2012-06-15 Michael Choi

恐怕你的問題，以目前的形式，只相當於標記和樣板代碼。你有沒有嘗試過什麼？請張貼您的（甚至不完整或不正確的）解決此問題的代碼;這將幫助我們調整解決方案以適應您的特定用例。 –

對不起，第一次在StackOverflow上提出問題。另外，對於jQuery和Javascript來說很新，所以請原諒我的編碼。我希望有一個jQuery UI的內置解決方案，所以我不認爲我所做的事很重要。 –

我認爲這可能是你在找什麼：

<div class='left-column'> 
    <div name='field_1'>content 1</div> 
    <div name='field_2'>content 2</div> 
    <div name='field_3'>content 3</div> 
    </div> 
    <div class='right-column'> 
    <div name='field_1'>content 1</div> 
    <div name='field_2'>content 2</div> 
    <div name='field_3'>content 3</div> 
</div> 

$('.left-column').sortable({ 
    axis: 'y', 
    stop: function(event, ui) { 
     $('.left-column div[name^=field_]').each(function(i, v) { 
      $('.right-column').find("[name=" + $(v).attr('name') + "]").appendTo($('.right-column')); 
     }); 
    } 
}); 
$('.right-column').disableSelection();

來源

2012-06-15 19:03:46 hitmanDX

This Works！謝謝！ –

jQuery UI可排序鏈接元素

回答

相關問題