0

我正在尝试使用interact.js 为我的移动应用程序使用可拖动的div（触摸和拖动）实现交互式菜单。他们网站上的 Snapping 示例似乎不起作用。它给出了错误：Uncaught TypeError: Cannot read property 'ownerDocument' of null。

这是我的 HTML 文件

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<link rel="stylesheet" href="components/loader.css">
<script src="components/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/interact.js/1.2.8/interact.min.js"></script>

 <style>
  #grid-snap {
  width: 40%;
  background-color: #29e;
  color: #fff;
  font-size: 1.2em;
  border-radius: 4px;
  padding: 2%;
  margin: 5%;
 }  
</style>

<script>
var element = document.getElementById('grid-snap'),
x = 0, y = 0;

interact(element)
  .draggable({
    snap: {
      targets: [
        interact.createSnapGrid({ x: 30, y: 30 })
      ],
      range: Infinity,
      relativePoints: [ { x: 0, y: 0 } ]
    },
    inertia: true,
    restrict: {
      restriction: element.parentNode,
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 },
      endOnly: true
    }
  })
  .on('dragmove', function (event) {
    x += event.dx;
    y += event.dy;

    event.target.style.webkitTransform =
    event.target.style.transform =
        'translate(' + x + 'px, ' + y + 'px)';
  });
</script>
</head>
<body>
<div style="width:100%">
    <div id="grid-snap">
    Dragging is constrained to the corners of a grid
    </div>
</div>
</body>
</html>
4

0 回答 0