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> 

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>