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

Question

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

只要所有项目都适合窗口，它就可以完美工作。但是当我有很多项目时，滚动条就会出现，占位符的宽度会变小。或者实际上，当我在IE开发人员工具中检查占位符时，宽度设置为正确的值，但仍显示为细线。 “在此处输入图像描述” “ >>

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

所以我的问题是，为什么占位符在IE中没有以正确的宽度显示（在Chrome中似乎有效）？而我该如何解决呢？

编辑：我注意到最小宽度有效与IE中inline-flex的有效方式有关吗？

提前感谢！

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

我有一个水平列表，我正在尝试使用jqueryui sortable进行排序。只要所有项目都适合窗口，它就能完美工作。但是当我有很多项目时，滚动条就会出现...

Answer 1

0
投票

这对我有用

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());
        }
    });

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

问题描述投票：1回答：2

2个回答

最新问题

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

问题描述 投票：1回答：2

2个回答

最新问题

问题描述投票：1回答：2