jQuery可排序的静态内容

Question

I writing a website by using Bootstrap and jQuery. Now, i have a horizontal list of div at the bottom of webpage. It's act like the Slide bar in Microsoft Powerpoint. The number is unchange element. If i got 6 record from server, it will generate 6 slide in the list. User can drag the "DIV" box and move to another position. Just like the normal flow of Sortable plugin.

Expected result: I tried two way to code this "slide bar". However, i cannot build the expected result.

Concept 1: Split two row to perform. but will have two scrollable.

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

Concept 2: use "items". However, it will exist some weird issue when can drag the box. slideNumber div will move to wrong position and box will disappear

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

Anyone can give me a hint to build this slide bar?

Answer 1

This should work:

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