我的拖动项目最初出现在左上角。我想在开口处从顶部到左侧留出 100 像素的空间。但我必须用interactjs自己的代码而不是css来做到这一点。因为如果我用 css 来做，滚动设置就会被破坏
interact('.dragitem')
.draggable({
inertia: true,
modifiers: [
interact.modifiers.restrictRect({
restriction: 'parent',
endOnly: true
})
],
autoScroll: true,
listeners: {
move: dragMoveListener
}
})
function dragMoveListener (event) {
var target = event.target
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
target.setAttribute('data-x', x)
target.setAttribute('data-y', y)
}
window.dragMoveListener = dragMoveListener
.drag-container {
width:1000px;
height:1000px;
background:red;
}
.dragitem {
width:100px;
height:100px;
background:blue;
}
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<div class="drag-container">
<div class="dragitem">drag me</div>
</div>
您必须直接在 HTML 中编辑 style、data-x 和 data-y 的起始位置
<div class="dragitem" style="transform: translate(100px, 100px);" data-x="100" data-y="100">drag me</div>
interact('.dragitem')
.draggable({
inertia: true,
modifiers: [
interact.modifiers.restrictRect({
restriction: 'parent',
endOnly: true
})
],
autoScroll: true,
listeners: {
move: dragMoveListener
}
})
function dragMoveListener (event) {
var target = event.target
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
target.setAttribute('data-x', x)
target.setAttribute('data-y', y)
}
window.dragMoveListener = dragMoveListener
.drag-container {
width:1000px;
height:1000px;
background:red;
}
.dragitem {
width:100px;
height:100px;
background:blue;
}
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<div class="drag-container">
<div class="dragitem" style="transform: translate(100px, 100px);" data-x="100" data-y="100">drag me</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
