Bootstrap jQuery UI可排序和引导网格

zf2sa74q 于 2023-11-15 发布在 Bootstrap

关注(0)|答案(3)|浏览(160)

我在BS中创建了一个 Jmeter 板网格，并希望能够使用Sortable拖动瓷砖-这本身工作正常，但行为确实不可预测。
我有一个6 x 4的网格，例如，如果我将一个项目从第2行移动到第1行，那么该项目将正确地移动到位，但它正在替换的项目将跳到第2行，其他所有内容都将向下移动一行，因此我现在最终得到6 x 5的网格。
此外，在大多数情况下，我实际上不能直接将项目移动到第2行，所以我需要开始移动所有其他瓷砖，其中每个瓷砖也有类似的问题，使情况变得更糟。
我使用的sortable代码是：

$(function() {
    $(".sortable-heading").sortable({
        connectWith: '.heading-sortable',
        items: '.panel',
        helper: 'original',
        cursor: 'move',
        handle: '.panel-title, [data-action=move]',
        revert: 100,
        grid: [ 10, 10 ],
        delay: 150,
        containment: '#home-dash',
        forceHelperSize: true,
        opacity: 0.7,
        placeholder: 'sortable-placeholder',
        forcePlaceholderSize: true,
        tolerance: 'pointer',
        start: function(e, ui){
            ui.placeholder.height(ui.item.outerHeight());
        }
    }); 
});

字符串
我没有发布所有的HTML代码，而是创建了一个小提琴来展示这一点。
如果您将红色面板移动到第一行，您将看到添加额外行的行为，如果您尝试将蓝色面板拖到现在的第二行，则无法轻松完成。
https://jsfiddle.net/mk3whz43/2/

twitter-bootstrap

来源：https://stackoverflow.com/questions/36426655/jquery-ui-sortable-and-bootstrap-grid

3条答案

按热度按时间

mpgws1up1#

我认为html的结构太复杂了，不能和你现在的代码一起工作，当你移动一个项目的时候，它被附加/前置到它应该交换的项目的父div上，这样就破坏了内容的结构。
你需要做的是将你想要排序的项目的父div存储在一个变量中，在更新时，.append将目标项目存储到这个div中。当你开始排序时，你仍然会看到“跳跃”，但是项目的实际排序将工作。
下面是更新后的代码（我在代码中添加了注解来解释我所做的事情）：

$(function() {
  var startParent;
  $(".sortable-heading").sortable({
    connectWith: '.heading-sortable',
    items: '.panel',
    helper: 'original',
    cursor: 'move',
    handle: '.panel-title, [data-action=move]',
    revert: 100,
    grid: [10, 10],
    delay: 150,
    containment: '#home-dash',
    forceHelperSize: true,
    opacity: 0.7,
    placeholder: 'sortable-placeholder',
    forcePlaceholderSize: true,
    tolerance: 'pointer',
    start: function(e, ui) {
      ui.placeholder.height(ui.item.outerHeight());
      //Store the parent in a variable as we will be appending the target item to this in the "update" event.
      startParent = $(ui.item).closest('.col-xs-2');
    },
    update: function(e, ui) {
      //When an item is swapped, it may have been added before the existing item or after it.
      //Check if the contents of the "next" item is not undefined. If it is undefined, it means
      //the item was inserted before the existing item. 
      if ($(ui.item).next()[0] !== undefined) {
        //next() is the existing item.
        startParent.append($(ui.item).next());
      } else {
        startParent.append($(ui.item).prev());
      }
    }
  });
});

字符串

Updated Fiddle

展开查看全部

赞(0）回复(0）举报 2023-11-15

hgncfbus2#

bhttoan，
这是预期的行为。当你再添加一个col-xs-2.所以，最后一个项目将被推到下一行。为了解决这个问题，你需要有一个单一的div与类行为所有（4x 6 =24项）。然后你的结构被保留。

赞(0）回复(0）举报 2023-11-15

uyhoqukh3#

你可以这样使用它

<!doctype HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Display as grid</title>
  <link 
   rel="stylesheet"href="//code.jquery.com/ui/1.13.2/themes/base/jquery- 
   ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 
  450px; }
  #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; 
 width: 100px; height: 90px; font-size: 4em; text-align: center; }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
} );
</script>
</head>
<body>
  <ul id="sortable">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">3</li>
    <li class="ui-state-default">4</li>
    <li class="ui-state-default">5</li>
    <li class="ui-state-default">6</li>
    <li class="ui-state-default">7</li>
    <li class="ui-state-default">8</li>
    <li class="ui-state-default">9</li>
    <li class="ui-state-default">10</li>
    <li class="ui-state-default">11</li>
  <li class="ui-state-default">12</li>
</ul>
</body>
</html>

字符串

展开查看全部

赞(0）回复(0）举报 2023-11-15

我来回答

Bootstrap jQuery UI可排序和引导网格

3条答案

相关问题

热门标签

最新问答