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格將移動到錯誤的位置，框將消失

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

Answer 2

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