使用可排序的 jquery 和 css 转换/转换

Question

我有一个页面，它在导航时使用变换来滑动内容。 某些内容具有 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"
      });
    });
});

Answer 1

这可能是 jQuery 无法使用静态定位和平移变换计算位置的问题。 一种简单的解决方案是将您的主要元素设置为绝对位置并应用您在回家时应用的 -16 转换。 像这样：

main {
  display: flex;
  width: 303%;
  position: absolute;
  transform: translateX(-16px)
}

http://codepen.io/anon/pen/bwqPqk