使用可排序的 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