使用带有 css 转换/转换的 jquery 可排序

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 在使用静态定位和平移变换计算位置时遇到的问题。一个简单的解决方案是将您的 ma​​in 元素设置为绝对位置并应用您在回家时应用的 -16 转换。像这样：

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

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