Question

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

我已经从其他项目中收获了代码，以实现我认为可以使用的代码，并且在我的测试中，我发现它在触摸屏上不起作用。不幸的是，我不了解单击按住并拖动和手指拖动之间的实际区别，但是显然有足够的地方使我的滑块无法在触摸屏设备上工作。

我在此站点上阅读了许多问题，发现的大多数内容与根据设备屏幕大小自动调整div或表的大小有关。我的问题特别适用于手动移动滑块以调整容器的x / y轴大小。

我不喜欢下面的任何代码，因此如果有人有更好的方法实现目标，我可以提出建议。

(function (exports, require, module, __filename, __dirname) { import Papa from 'papaparse';
                                                                     ^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:80:7)
    at createScript (vm.js:274:10)
    at Object.runInThisContext (vm.js:326:10)
    at Module._compile (internal/modules/cjs/loader.js:664:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:754:12)
    at startup (internal/bootstrap/node.js:283:19)

[Done] exited with code=1 in 0.104 seconds

$(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;
}

这里是a working codepen。

我在Android和Apple设备上都尝试过，并且尝试拖动滑块没有任何作用。

Answer 1

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

http://touchpunch.furf.com/

我只是简单地将Jquery UI添加到我的项目中，并且效果很好！

从Touch Punch主页引用：

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

我的DIV调整大小在触摸屏上不起作用

1 个答案: