jQuery 可按静态内容排序

Question

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

预期结果：我尝试了两种编码方式"slide bar"。但是，我无法构建预期的结果。

概念一：拆分两行执行。但会有两个可滚动的。

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

概念二：使用 "items"。但是，当可以拖动框时会存在一些奇怪的问题。 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

.row
{
width:100%;

}
 .col-md-12,.slideNumber
{
width:100%;
display:flex;
margin-right:50px;
}

.box
{
width:50px;
height:50px;
background:gray;
text-align:center;
line-height: 50px;
vertical-align: middle;
}

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

Answer 2

这应该有效：

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

jQuery 可按静态内容排序

jQuery Sortable with static content

html

javascript

jquery

jquery-ui-sortable