javascript - jQuery 可对静态内容进行排序

Question

我使用 Bootstrap 和 jQuery 编写一个网站。现在，我在网页底部有一个水平的 div 列表。它的作用类似于 Microsoft Powerpoint 中的幻灯片。该数字是不变的元素。如果我从服务器获得 6 条记录，它将在列表中生成 6 张幻灯片。用户可以拖动“DIV”框并移动到另一个位置。就像 Sortable 插件的正常流程一样。

预期结果: 我尝试了两种方法来编码这个“滑动条”。但是，我无法构建预期的结果。

概念1: 分成两行来执行。但会有两个可滚动的。

<div class="row">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-12">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 sortable-list">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
    </div>
  </div>
</div>

概念2: 使用“项目”。但是，当可以拖动盒子时，会存在一些奇怪的问题。 SlideNumber div 将移动到错误位置并且框将消失

$("sortable-list").sortable({
  items:'.box'
});

.slideNumber{
position: absolute;
top:0px;
left:15px;
}

.box{
position: absolute;
top:30px;
left:0;
}
/**roughly css**/

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="row">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-12 sortable-list">
            <div>
              <div class="slideNumber">1</div>
              <div class="box"></div>
            </div>
            <div>
              <div class="slideNumber">2</div>
              <div class="box"></div>
            </div>
            <div>
              <div class="slideNumber">3</div>
              <div class="box"></div>
            </div>
            <div>
              <div class="slideNumber">4</div>
              <div class="box"></div>
            </div>
            <div>
              <div class="slideNumber">5</div>
              <div class="box"></div>
            </div>
            <div>
              <div class="slideNumber">6</div>
              <div class="box"></div>
            </div>
          </div>
        </div>
    </div>
</div>

任何人都可以给我构建这个滑动条的提示吗？

Answer 1

这应该有效:

$( function() {
  $(".sortable-list")
    .sortable()
    .disableSelection();
} );

.container > div {
  padding:0 30px 0px 30px;
  display:inline-block;
}
.sortable-list > div {
  margin:1px;
  display:inline-block;
  padding:30px;
  background:#777;
  border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-12 container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 sortable-list">
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
      </div>
    </div>
  </div>
</div>