jQuery UI 可排序链接元素答案

【问题标题】：jQuery UI Sortable linked elementsjQuery UI 可排序链接元素
【发布时间】：2012-06-15 18:35:56
【问题描述】：

我有两列，每列有很多行/div。我正在尝试让 jQuery UI Sortable 以某种方式工作，如果我在左列中拖动一个 div，右列中的关联行/div 也将被排序。

例如，

<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
      });
    }
  });
};

如果我将 .left-column .field_2 拖到 .field_3 下方，.right-column 中的各个 div 也应该重新排列。

谢谢！

【问题讨论】：

恐怕你的问题，以其目前的形式，仅相当于标记和样板代码。你有尝试过什么吗？请发布您（即使不完整或不正确）尝试解决此问题的代码；这将帮助我们根据您的特定用例调整解决方案。
抱歉，第一次在 StackOverflow 上提问。另外，对于 jQuery 和 Javascript 来说还很新，所以请原谅我的编码。我希望 jQuery UI 有一个内置的解决方案，所以我认为我所做的并不重要。

标签： javascript jquery jquery-ui jquery-ui-sortable

【解决方案1】：

我认为这可能是您正在寻找的：

<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();

【讨论】：