JQuery UI Sortable with Horizo​​ntal Scrolling正在向下移动所有元素 [英] JQuery UI Sortable with Horizontal Scrolling is shifting all elements down

问题描述

我想允许用户使用滚动条从左到右排序对象。

对象是包含HTML的框，包括一些文本，

问题是，当用户拖动其中一个对象时，所有其他对象在拖动过程中向下移动。

这里是我有：

HTML：

 < div id =parentclass =parent> 
< div id =listclass =list> 
< div class =item> A< / div> 
< div class =item> B< / div> 
< div class =item> C< / div> 
< / div> 
< / div> 
  

CSS：

 code> .parent {
 height：64px; 
 width：280px; 
} 
 .list {
 background-color：＃d0d0d0; 
 white-space：nowrap; 
 overflow-x：scroll; 
 overflow-y：hidden; 
 / * text-align：left; * / 
} 
 .item {
 background-color：＃404040; 
 height：40px; 
 width：100px; 
 margin：4px; 
 cursor：pointer; 
 display：inline-block; 
 / * float：left; * / 
 / * float：none; * / 
 / * clear：both; * / 
} 
 .placeholder {
 height：40px; 
 width：20px; 
 display：inline-block; 
 margin：4px; 
} 
  

Javascript：

  $（function（）{
 $（'＃list'）。disableSelection（）。sortable（{
 scroll：true，
 placeholder： placeholder'，
 // containment：'parent'，
 axis：'x'
}）; 
}）
  pre> 
 
 
我尝试了很多不同的设置，并留下一些作为注释。
 
 
 
请参阅问题： http://jsfiddle.net/francispotter/gtKtE/  
解决方案
我发现一个解决方案，不必重写ui库，是一个干净的和CSS修复：
  .ui-sortable-placeholder {
 display：inline-block; 
 height：1px; 
} 
  
 
I want to allow the user to sort objects left-to-right with a scroll bar.

The objects are boxes with HTML in them, including some text, not images like many of the other examples.

The problem is that as the user drags one of the objects, all the other ones shift downward during dragging.

Here's what I have:

HTML:
<div id="parent" class="parent">
  <div id="list" class="list">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
  </div>
</div>
CSS:
.parent {
  height:64px;
  width:280px;
}
.list {
  background-color:#d0d0d0;
  white-space:nowrap;
  overflow-x:scroll;
  overflow-y:hidden;
  /*text-align:left;*/
}
.item {
  background-color:#404040;
  height:40px;
  width:100px;
  margin:4px;
  cursor:pointer;
  display:inline-block;
  /*float:left;*/
  /*float:none;*/
  /*clear:both;*/
}
.placeholder {
  height:40px;
  width:20px;
  display:inline-block;
  margin:4px;
}
Javascript:
$(function() {
  $('#list').disableSelection().sortable({
    scroll: true,
    placeholder: 'placeholder',
    //containment:'parent',
    axis: 'x'
  });
})
I tried lots of different settings, and left some of them in as comments.

Best way to see the problem is here: http://jsfiddle.net/francispotter/gtKtE/
解决方案
A solution I found that works WITHOUT having to rewrite the ui library and is a clean and css fix:
.ui-sortable-placeholder {
  display: inline-block;
height: 1px;
}


                        
这篇关于JQuery UI Sortable with Horizo​​ntal Scrolling正在向下移动所有元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！