問題與jQuery可排序/拖動功能DIV位置移動拖動

我對jQuery可排序用戶界面插件的世界有點新，我很難搞清楚爲什麼我所有的div在一排，當其中一個移動到另一個排序順序時停止。它似乎工作得很好時，它的垂直列表，但這不適用於此應用程序。問題與jQuery可排序/拖動功能DIV位置移動拖動

我無法添加圖片，因爲這是我的第一篇文章，但基本上就是這樣，沒有奇怪的邊距或任何設置。

有兩個容器會交易信息，但我認爲這不會對這個問題產生影響。如果有更合適的方式來做到這一點，我更歡迎提出建議。

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
    <title>Test</title> 


    </head> 
    <style> 

    #List1, #List2 
    { 
     overflow-x: scroll; 
     overflow-y: hidden; 
     height:85px; 
     width: 700px; /* not really your css, I used it in my test case */ 
     white-space:nowrap; 

    } 

    #List1 > DIV, #List2 > DIV 
    { 
     display: inline-block; 
     width:85px; 
     height:55px; 
     border:solid thin black; 
     position:inherit; 
     margin:inherit; 
    } 
    </style> 
    <body> 
    <div id="List1"> 
     <div>test1</div> 
     <div>test2</div> 
     <div>test3</div> 
     <div>test4</div> 

    </div> 

    <div id="List2"> 
     <div>test5</div> 
     <div>test6</div> 
     <div>test7</div> 
     <div>test8</div> 
     <div>test9</div> 
     <div>test10</div> 

    </div> 

    </body> 
    </html> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 

     <script> 
    $(function(){ 
     var sortlists = $("#List1, #List2").sortable(
     { 
      appendTo: 'body', 
      tolerance: 'pointer', 
      connectWith: '#List1, #List2', 
      revert: 'invalid', 
      forceHelperSize: true, 
      helper: 'original', 
      scroll: true, 
      cursorAt: { top: 0, left: 0 } 
     }); 
     $("#List1, #List2").disableSelection(); 

    }); 


    </script> 
    </body> 
    </html>

來源

2013-07-09 Chris W

爲什麼你已經兩次關閉的標籤''和''？ – putvande

Duplicate http://stackoverflow.com/questions/7275374/jquery-ui-sortable-with-horizontal-scrolling-is-shifting-all-elements-down –

嘗試添加此：

.ui-sortable-placeholder{ 
    display: none !important; 
}

來源

2013-07-09 22:39:49 4m1r

這裏是一個小提琴：http://jsfiddle.net/vGyQ6 /它看起來像jQuery的UI添加一個小傢伙的div和由於某種原因顯示：隱藏不被尊重。 – 4m1r

我修改了jquery庫並替換爲 .removeClass（「ui-sortable-helper」）[0]; 與 .removeClass（「ui-sortable-helper」）。html（' '）[0]; 而且這似乎是個訣竅，我會去做一些閱讀嘗試並理解這將如何滿足我的需求。謝謝！ –

問題與jQuery可排序/拖動功能DIV位置移動拖動

回答

相關問題