问题与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位置移动拖动

回答

相关问题