在可滚动的div中水平拖动表(或其他内容)

Question

我有一个相当大的表位于固定的div中,设置为溢出.这会添加一个水平滚动条很好,但我希望能够在可滚动的div中拖动我的表,所以基本上不仅仅依靠滚动条来滚动表格.

我的(样本)代码:

.box {
  overflow-x: auto;
  overflow-y: hidden;
  width: 500px;
}
table {
  width: 100%;
}
table td,
table th {
  padding: 5px;
}

<div class="box">
  <table>
    <thead>
      <tr>
        <th>Column1</th>
        <th>Column2</th>
        <th>Column3</th>
        <th>Column4</th>
        <th>Column5</th>
        <th>Column6</th>
        <th>Column7</th>
        <th>Column8</th>
        <th>Column9</th>
        <th>Column10</th>
        <th>Column11</th>
        <th>Column12</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
        <td>Lorem ipsum dolor sit amet bla bla etc</td>
      </tr>
    </tbody>
  </table>
</div>

我试过jquery draggable但是得不到相同的结果.有关如何使用css或jquery实现此目的的任何想法？理想情况下我只想用css做这个,但我不确定这是否可行.内容只需要水平拖动.

小提琴:https://jsfiddle.net/41gv8y77/

Answer 1

这是可能的(你可以想象),但在逻辑上使用JavaScript,导致CSS 拖拽(或更好:事件)不可知.

这是使用jQuery的一个例子:

var mx;

$(".xDragScroll").on({
  mousemove: function(e) {
    var mx2 = e.pageX - this.offsetLeft;
    if(mx) this.scrollLeft = this.sx + mx - mx2;
  },
  mousedown: function(e) {
    this.sx = this.scrollLeft;
    mx = e.pageX - this.offsetLeft;
  }
});

$(document).on("mouseup", function(){
  mx = 0;
});

您也可以轻松地更改或扩展Y轴的上述脚本.

var mx = 0;

$(".drag").on({
  mousemove: function(e) {
    var mx2 = e.pageX - this.offsetLeft;
    if(mx) this.scrollLeft = this.sx + mx - mx2;
  },
  mousedown: function(e) {
    this.sx = this.scrollLeft;
    mx = e.pageX - this.offsetLeft;
  }
});

$(document).on("mouseup", function(){
  mx = 0;
});

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0; font:16px/20px sans-serif;}

.box {
  overflow-x: auto;
  overflow-y: hidden;
  width: 500px;
  margin:60px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;  
  -moz-user-select: none;   
  -ms-user-select: none;     
  user-select: none; 
}
table {
  width: 100%;
}
table td,
table th {
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box drag">
<table>
  <thead>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
      <th>Column5</th>
      <th>Column6</th>
      <th>Column7</th>
      <th>Column8</th>
      <th>Column9</th>
      <th>Column10</th>
      <th>Column11</th>
      <th>Column12</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
    </tr>
  </tbody>
</table>
</div>

Answer 2

在纯 javascript (Vanilla) 中

var elementScroll = document.querySelector('.drag');
var mx = 0;

elementScroll.addEventListener("mousedown", function(e){
  this.sx = this.scrollLeft;
  mx = e.pageX - this.offsetLeft;

  this.addEventListener("mousemove", mouseMoveFunction);
});

elementScroll.addEventListener("mouseup", function(e){
  this.removeEventListener("mousemove", mouseMoveFunction);
  mx = 0;
});

function mouseMoveFunction(e){
  var mx2 = e.pageX - this.offsetLeft;
  if(mx) this.scrollLeft = this.sx + mx - mx2;
}

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0; font:16px/20px sans-serif;}

.box {
  overflow-x: auto;
  overflow-y: hidden;
  width: 500px;
  margin:60px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;  
  -moz-user-select: none;   
  -ms-user-select: none;     
  user-select: none; 
}
table {
  width: 100%;
}
table td,
table th {
  padding: 5px;
}

<div class="box drag">
<table>
  <thead>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
      <th>Column5</th>
      <th>Column6</th>
      <th>Column7</th>
      <th>Column8</th>
      <th>Column9</th>
      <th>Column10</th>
      <th>Column11</th>
      <th>Column12</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
    </tr>
  </tbody>
</table>
</div>