我有一个在导航时使用transform滑动内容的页面。有些内容具有jQuery可排序的表行。首先，排序按预期工作。但是在单击导航项之后(因此应用转换并滑动到所需的内容)，排序不会像预期的那样起作用。相反，当您单击要拖动的行时，它会落在光标下方，因此难以排序。请参阅下面的CodePen作为示例。在单击导航之前尝试拖动一行，然后单击导航后查看差异。
是否有一种方法围绕这(我不知道从哪里开始)?或者我需要找到一种不同的方式滑动我的内容?
https://codepen.io/thespareroomstudio/pres/XjrEyg<nav>
<ul>
<li id='goto_slide-1' class='slideNavItem'>Home</li>
<li id='goto_slide-2' class='slideNavItem'>Not Home</li>
<li id='goto_slide-3' class='slideNavItem'>Far from home</li>
</ul>
</nav>
<main>
<div id='slide-1' class='slide active'>
<table>
<caption>This is a table at home</captin>
<thead>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
<div id='slide-2' class='slide inactive'>
<table>
<caption>This is a table not at home</captin>
<thead>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
<div id='slide-3' class='slide inactive'>
<table>
<caption>This is a table far from home</captin>
<thead>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
body {
overflow: hidden;
}
nav ul li {
display: inline-block;
margin-left: 1em;
cursor: pointer;
}
table {
border-collapse: collapse;
border: 1px solid #000;
margin-bottom: 1em;
}
main {
display: flex;
width: 303%;
}
.slide {
width: 100%;
margin: 1em;
}
table tr:nth-child(even) {
background-color: lightgrey;
}
table td {
border: 1px solid lightgray;
}
#slide-1 table {
width: 100%;
}
#slide-1 table caption {
background-color: lightblue;
border: 1px solid #000;
}
#slide-2 table {
width: 100%;
}
#slide-2 table caption {
background-color: lightgreen;
border: 1px solid #000;
}
#slide-3 table {
width: 100%;
}
#slide-3 table caption {
background-color: lightyellow;
border: 1px solid #000;
}
$("tbody").sortable({
items: "> tr"
});
$(document).on("click", ".slideNavItem", function() {
var navID = $(this).attr('id');
console.log(navID);
var slideTo = $('#' + navID.split("_")[1]);
console.log(slideTo);
var inactiveElems = $("main").find(".slide.inactive").toggleClass("inactive");
var curActiveElem = $("main").find(".slide.active");
var wrapper = slideTo.closest("main");
console.log(wrapper);
var button = $(this);
var wrapperInlineStyles = wrapper.attr('styles');
if (wrapperInlineStyles === undefined) {
wrapperInlineStyles = ""
}
var elemPos = slideTo.offset().left;
console.log(elemPos);
var moveTo = (wrapper.offset().left) - (elemPos);
console.log(moveTo);
wrapper.css({
"transform": "translate(" + moveTo + "px, 0)",
"transition": "1s ease-in-out"
});
wrapper.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
function(e) {
$("main").find(".slide.active").removeClass("active") // remove active class from old position
slideTo.addClass("active"); // add active classs to new position
$("main").find(".slide").not(".active").addClass("inactive"); // now add hide (add inactive class to)the other elemens
wrapper.css({
"transition": "none"
});
});
});
这可能是jQuery在计算静态定位和转换位置时遇到的问题。一个简单的解决方案是将主元素设置为绝对位置，并应用返回时应用的-16翻译。这样的:
main {
display: flex;
width: 303%;
position: absolute;
transform: translateX(-16px)
}