Question

我有一个页面，在导航时使用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"
      });
    });
});

Answer 1

jQuery在使用静态定位和转换转换计算位置时遇到问题可能是个问题。一个简单的解决方案是将主元素设置为绝对位置并应用返回主页时应用的-16翻译。像这样：

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

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

使用jquery sortable与css转换/转换

}

1 个答案: