jQuery可对静态内容进行排序

Question

我使用Bootstrap和jQuery编写网站。现在，我在网页底部有一个div的水平列表。它就像Microsoft Powerpoint中的Slide栏一样。数字是unchange元素。如果我从服务器获得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

这应该有效：

＆＃13;

＆＃13;

<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>

＆＃13;

Filters

＆＃13;

Projections

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

<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>
              <div class="slideNumber">2</div>
              <div class="box">Div</div>
            </div>
            <div>
              <div class="slideNumber">3</div>
              <div class="box">Div</div>
            </div>
            <div>
              <div class="slideNumber">4</div>
              <div class="box">Div</div>
            </div>
            <div>
              <div class="slideNumber">5</div>
              <div class="box">Div</div>
            </div>
            <div>
              <div class="slideNumber">6</div>
              <div class="box">Div</div>
            </div>
          </div>
        </div>
    </div>
</div>

＆＃13;

ScrollView

＆＃13;

＆＃13;

＆＃13;