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可排序链接元素

回答

相关问题