以下Javascript代码链接到HTML文件。文件显示意外标识符错误。有人可以帮我吗? 我已使用interactJS来调整类resize-drag中的元素的大小。 我已经包含了HTML,CSS和Javascript文件。我只是想实现Interact.js网站本身上的调整大小示例。
interact('.resize-drag')
.draggable({
onmove: window.dragMoveListener,
modifiers: [
interact.modifiers.restrict({
restriction: 'parent',
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
})
]
})
.resizable({
// resize from all edges and corners
edges: { left: true, right: true, bottom: true, top: true },
modifiers: [
// keep the edges inside the parent
interact.modifiers.restrictEdges({
outer: 'parent',
endOnly: true,
}),
// minimum size
interact.modifiers.restrictSize({
min: { width: 100, height: 50 },
}),
],
inertia: true
})
.on('resizemove', function (event) {
var target = event.target,
x = (parseFloat(target.getAttribute('data-x')) || 0),
y = (parseFloat(target.getAttribute('data-y')) || 0);
// update the element's style
target.style.width = event.rect.width + 'px';
target.style.height = event.rect.height + 'px';
// translate when resizing from top or left edges
x += event.deltaRect.left;
y += event.deltaRect.top;
target.style.webkitTransform = target.style.transform =
'translate(' + x + 'px,' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height);
});
HTML文件
<!DOCTYPE html5>
<html>
<head>
<link rel="stylesheet" type="text/css" href="drag.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/interact-js@2.1.0/interact.min.js"></script>
<script type="text/javascript" src = "drag.js"></script>
<title>Drag and drop</title>
</head>
<body>
<div class="resize-container">
<div class="resize-drag">
</div>
</div>
</body>
</html>
CSS文件:
.resize-drag {
background-color: #29e;
color: white;
font-size: 20px;
font-family: sans-serif;
border-radius: 8px;
padding: 20px;
margin: 30px 20px;
touch-action: none;
width: 120px;
/* This makes things *much* easier */
box-sizing: border-box;
}
.resize-container {
display: inline-block;
width: 100%;
height: 240px;
}
答案 0 :(得分:0)
对于任何想知道错误是什么的人,javascript代码都没有定义dragMoveListener
函数(此函数在draggable
方法的object参数上调用)
此修复程序只是定义和“激活”功能。幸运的是,官方文档提供了该功能。只需将其放在文件开头:
function dragMoveListener (event) {
var target = event.target
// keep the dragged position in the data-x/data-y attributes
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)'
// update the posiion attributes
target.setAttribute('data-x', x)
target.setAttribute('data-y', y)
}
window.dragMoveListener = dragMoveListener