Question

我有一个水平列表，我试图使用jqueryui sortable进行排序。

只要所有物品都适合窗户，它就能完美运作。但是当我有很多项目时，滚动条会出现占位符宽度很小。或者实际上，当我在IE开发人员工具中检查占位符时，宽度设置为正确的值，但它仍然只显示为细线。 enter image description here

我注意到在占位符样式中添加填充可以使其更宽，但为什么我不能使用宽度？我真正想要的是占位符获取项目的宽度，而不需要在占位符类中指定它，它在不需要滚动条时执行。

所以我的问题是为什么IE中没有显示正确宽度的占位符（它似乎在Chrome中工作）？我该怎么做才能解决这个问题？

编辑：我注意到最小宽度的工作是否与inline-flex在IE中的工作方式有关？

提前致谢！

$("#list").sortable({
		items: "> li",
		opacity: 0.8,
		placeholder: "lm-placeholder",
		tolerance: "pointer",
		helper: "original",
		revert: true,
		axis: "x",
		start: function (event, ui) {
			var index = ($(ui.item).index());
		}
	});

.container {
	width: 500px;
}

.listContainer {
	overflow-x: auto;
}

.list {
	list-style-type: none;
	display: inline-flex;
	background-color: antiquewhite;
}

.item {
	padding: 2px;
}

.card {
	width: 100px;
	height: 100px;
	background-color: white;
	border: 1px solid #666666;
}

.lm-placeholder {
	border: 3px dashed #bdbdbd;
	width: 100px;
	background-color: #078cd9;
	/*padding-left: 20px;
	padding-right: 20px;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<body>
<div id="content" class="container">
		<div class="listContainer">
			<ul id="list" class="list">
				<li class="item"><div class="card">1</div></li>
				<li class="item"><div class="card">2</div></li>
				<li class="item"><div class="card">3</div></li>
				<li class="item"><div class="card">4</div></li>
				<li class="item"><div class="card">5</div></li>
				<li class="item"><div class="card">6</div></li>
				<li class="item"><div class="card">7</div></li>
			</ul>
		</div>
	</div>
</body>

Answer 1

这对我有用

.placeholder {
  display: inline-block;
  width: 30px;
  height: 20px;
  border: 1px solid yellow;
  background-color: orange;
}

Answer 2

$("#list").sortable({
        items: "> li",
        opacity: 0.8,
        placeholder: "lm-placeholder",
        tolerance: "pointer",
        helper: "original",
        revert: true,
        axis: "x",
        start: function (event, ui) {
            $(".placeholder").css('width',jQuery(ui['item']).css('width'));
            var index = ($(ui.item).index());
        }
    });

滚动可见时，IE11中的水平jquery可排序列表，占位符宽度不正确

2 个答案: