Question

我有两列，每列有很多行/ 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
      });
    }
  });
};

如果我在.field_3下面拖动.left-column .field_2，则.right-column中的相应div也应重新排列。

谢谢！

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

jQuery UI可排序的链接元素

1 个答案: