时间戳

首页 > 解决方案 > 我的 DIV 调整器在触摸屏上不起作用

javascript - 我的 DIV 调整器在触摸屏上不起作用

问题描述

我有一个项目，我需要通过滑动单个手动控件来调整一组 DIV 容器的大小。

我从其他项目中收集了代码来实现我认为可行的东西，在我的测试中，我发现它在触摸屏上不起作用。不幸的是，我不明白点击按住拖动和手指拖动之间的实际区别，但显然有足够的，所以我的滑块在触摸屏设备上不起作用。

我在这个网站上阅读了很多问题，我发现的大部分问题都与根据设备屏幕大小自动调整 div 或表格的大小有关。我的问题特别适用于手动移动滑块以调整容器的 x/y 轴的大小。

我没有与以下任何代码结婚，所以如果有人有更好的方法来实现目标，我愿意提出建议。

$(function() {
  var topH;
  var leftW;
  $("#grab").draggable({ // vert
    axis: "x",
    start: function(event, ui) {
      shiftInitial = ui.position.left;
      leftW = $("#left").width();
      topH = $("#top").height();
    },
    drag: function(event, ui) {
      var shift = ui.position.left;
      $("#left div").height(topH - shift / 8);
      $("#left div").width(leftW + shift);
    }
  });
});
#grab {
  /* grab bar */
  padding: .1em .1em .1em .1em;
  margin: 1em 1em 1em 3em;
  width: 3em;
  height: 5em;
  background: url(https://c7.uihere.com/icons/893/690/568/drag-vertical-f64d278f0957b61937f1aa604020339d.svg) no-repeat right;
  overflow: hidden;
  float: left;
  cursor: ew-resize;
}

#top {
  /* this is the container */
  margin: .5em .5em .5em .5em;
  padding: .5em .5em .5em .5em;
  width: 12em;
  height: 6.25em;
  min-width: 12em;
  max-width: 45em;
  min-height: 1.2em;
  max-height: 6.25em;
  border: solid #A8AFB4 .0625em;
  border-left: .7em solid blue;
  border-radius: .375em;
}

#left {
  /* to shove the grab icon over */
  width: 11em;
  height: 1em;
  float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>
  <div id="left">
    <div id="top">Div 1</div>
    <div id="top">Div 2</div>
    <div id="top">Div 3</div>
    <div id="top">Div 4</div>
    <div id="top">Div 5</div>
  </div>
  <div id="grab"></div>
</div>

这是一个工作的 codepen。

我在 Android 和 Apple 设备上都试过了，但试图拖动滑块什么也没做。

标签： javascriptjqueryhtmlcss

解决方案

经过大量搜索，我终于找到了解决问题的简单方法。

http://touchpunch.furf.com/

我只是将 Jquery UI 添加到我的项目中，它运行良好！

引用自 Touch Punch 主页：

Touch Punch 通过使用模拟事件将触摸事件映射到其鼠标事件类似物来工作。

推荐阅读