[英]Can't drag and drop to another div using interact.js
HTML/CSS 新手在這里,
我正在使用interact.js來獲得特定的 UI,我可以在其中將列表中的項目放入拖放區。 問題是我的列表可能會變得很長,我需要向列表添加滾動條,當我嘗試這樣做時,我創建了一個“div”並將列表項放入其中以顯示滾動行為。
但是當我將列表項放在 div 中並將放置區放在它外面時,這些項目不會被放置在那里並且列表顯示出奇怪的行為,所有這些都開始堆疊在底部列表項的頂部(在底部包含項目的 div)。
這是我的 html:
<div class="items">
<p style="padding-top: 20px; font-size:18px">Stacked Items</p>
<div style = "height: 400px; overflow: scroll">
<div id="itemstodrop" class="drag-drop"> item 1 </div>
<div id="itemstodrop" class="drag-drop"> item 2 </div>
<div id="itemstodrop" class="drag-drop"> item 3 </div>
<div id="itemstodrop" class="drag-drop"> item 4 </div>
<div id="itemstodrop" class="drag-drop"> item 5 </div>
<div id="itemstodrop" class="drag-drop"> item 6 </div>
<div id="itemstodrop" class="drag-drop"> item 7 </div>
<div id="itemstodrop" class="drag-drop"> item 8 </div>
<div id="itemstodrop" class="drag-drop"> item 9 </div>
<div id="itemstodrop" class="drag-drop"> item 10 </div>
<div id="itemstodrop" class="drag-drop"> item 11 </div>
<div id="itemstodrop" class="drag-drop"> item 12 </div>
</div>
<div id="inner-dropzone" class="dropzone">Drop here</div>
</div>
這是我的腳本,其中包含 interact.js 代碼:
import interact from
'https://cdn.jsdelivr.net/npm/@interactjs/interactjs/index.js'
// enable draggables to be dropped into this
var startPos = null;
//define the initial position for each rig tile.
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)
}
// this function is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener
//ALL THE FUNCTIONS BELOW TALK ABOUT THE DRAGGABLE AREA.
interact('.dropzone').dropzone({
// only accept elements matching this CSS selector
accept: '#itemstodrop',
// the item should go 100% inside the draggable area...
overlap: 0.9999999, //somehow it does not take the value 100%
// listen for drop related events:
ondropactivate: function (event) {
// add active dropzone feedback
event.target.classList.add('drop-active')
},
ondragenter: function (event) {
//when item enters the draggable area
var draggableElement = event.relatedTarget
var dropzoneElement = event.target
console.log(draggableElement.firstChild.nodeValue);
// feedback the possibility of a drop
dropzoneElement.classList.add('drop-target')
draggableElement.classList.add('can-drop')
},
ondragleave: function (event) {
console.log(startPos)
event.draggable.draggable({
snap: {
targets: [startPos]
}
});
//when item leaves the draggable area
// remove the drop feedback style
event.target.classList.remove('drop-target')
event.relatedTarget.classList.remove('can-drop')
},
ondrop: function (event) {
//when the item is droppd in the draggable area
{% comment %} event.relatedTarget.textContent = 'Dropped' {% endcomment %}
},
ondropdeactivate: function (event) {
// remove active dropzone feedback
event.target.classList.remove('drop-active')
event.target.classList.remove('drop-target')
}
})
interact('.drag-drop')
.draggable({
inertia: true,
modifiers: [
interact.modifiers.restrictRect({
restriction: 'parent',
endOnly: true
})
],
autoScroll: true,
// dragMoveListener from the dragging demo above
listeners: { move: dragMoveListener }
})
</script>
這是渲染時的樣子:(基本上不能將任何項目放到放置區域。)
演示的完整工作頁面:(我添加了一條評論,告訴我把 div 放在哪里。)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#outer-dropzone {
height: 140px;
}
#inner-dropzone {
height: 80px;
}
.dropzone {
background-color: #ccc;
border: dashed 4px transparent;
border-radius: 4px;
margin: 10px auto 30px;
padding: 10px;
width: 80%;
transition: background-color 0.3s;
}
.drop-active {
border-color: #aaa;
}
.drop-target {
background-color: #29e;
border-color: #fff;
border-style: solid;
}
.drag-drop {
display: inline-block;
min-width: 40px;
padding: 2em 0.5em;
color: #fff;
background-color: #29e;
border: solid 2px #fff;
touch-action: none;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
transition: background-color 0.3s;
}
.drag-drop.can-drop {
color: #000;
background-color: #4e4;
}
</style>
</head>
<body>
{% comment %} I NEED THIS DIV UNDER THIS COMMENT, TO ADD A SCROLL AREA. BUT WHEN I GIVE THIS DIV, THE DROP DOES NOT OCCUR. {% endcomment %}
<div>
<div id="no-drop" class="drag-drop"> #no-drop </div>
<div id="yes-drop" class="drag-drop"> #yes-drop </div>
</div>
<div id="outer-dropzone" class="dropzone">
#outer-dropzone
<div id="inner-dropzone" class="dropzone">#inner-dropzone</div>
</div>
<script type="module">
import interact from
'https://cdn.jsdelivr.net/npm/@interactjs/interactjs/index.js'
// enable draggables to be dropped into this
interact('.draggable')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
modifiers: [
interact.modifiers.restrictRect({
restriction: 'parent',
endOnly: true
})
],
// enable autoScroll
autoScroll: true,
listeners: {
// call this function on every dragmove event
move: dragMoveListener,
// call this function on every dragend event
end (event) {
var textEl = event.target.querySelector('p')
textEl && (textEl.textContent =
'moved a distance of ' +
(Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
Math.pow(event.pageY - event.y0, 2) | 0))
.toFixed(2) + 'px')
}
}
})
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)
}
// this function is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener
//ALL THE FUNCTIONS BELOW TALK ABOUT THE DRAGGABLE AREA.
interact('.dropzone').dropzone({
// only accept elements matching this CSS selector
accept: '#yes-drop',
// the item should go 100% inside the draggable area...
overlap: 0.9999999, //somehow it does not take the value 100%
// listen for drop related events:
ondropactivate: function (event) {
// add active dropzone feedback
event.target.classList.add('drop-active')
},
ondragenter: function (event) {
//when item enters the draggable area
var draggableElement = event.relatedTarget
var dropzoneElement = event.target
console.log(draggableElement.firstChild.nodeValue);
// feedback the possibility of a drop
dropzoneElement.classList.add('drop-target')
draggableElement.classList.add('can-drop')
},
ondragleave: function (event) {
//when item leaves the draggable area
// remove the drop feedback style
event.target.classList.remove('drop-target')
event.relatedTarget.classList.remove('can-drop')
},
ondrop: function (event) {
//when the item is droppd in the draggable area
{% comment %} event.relatedTarget.textContent = 'Dropped' {% endcomment %}
},
ondropdeactivate: function (event) {
// remove active dropzone feedback
event.target.classList.remove('drop-active')
event.target.classList.remove('drop-target')
}
})
interact('.drag-drop')
.draggable({
inertia: true,
modifiers: [
interact.modifiers.restrictRect({
restriction: 'parent',
endOnly: true
})
],
autoScroll: true,
// dragMoveListener from the dragging demo above
listeners: { move: dragMoveListener }
})
</script>
</body>
</html>
您需要將accept: '#rigstodrop'
更改為accept: '#itemstodrop'
因為這里您的 div 具有您需要拖放的 id itemstodrop
。 此外,使用restriction: '.items'
將 rect 限制為不超出該區域的 go。
演示代碼:
var startPos = null; //define the initial position for each rig tile. 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) } // this function is used later in the resizing and gesture demos window.dragMoveListener = dragMoveListener interact('.dropzone').dropzone({ // only accept elements matching this CSS selector accept: '#itemstodrop', //change this // the item should go 100% inside the draggable area... overlap: 0.9999999, ondropactivate: function(event) { // add active dropzone feedback event.target.classList.add('drop-active') }, ondragenter: function(event) { //when item enters the draggable area var draggableElement = event.relatedTarget var dropzoneElement = event.target console.log(draggableElement.firstChild.nodeValue); // feedback the possibility of a drop dropzoneElement.classList.add('drop-target') draggableElement.classList.add('can-drop') }, ondragleave: function(event) { console.log(startPos) event.draggable.draggable({ snap: { targets: [startPos] } }); //when item leaves the draggable area // remove the drop feedback style event.target.classList.remove('drop-target') event.relatedTarget.classList.remove('can-drop') }, ondrop: function(event) { //when the item is droppd in the draggable area event.relatedTarget.textContent = 'Dropped' }, ondropdeactivate: function(event) { // remove active dropzone feedback event.target.classList.remove('drop-active') event.target.classList.remove('drop-target') } }) interact('.drag-drop').draggable({ inertia: true, modifiers: [ interact.modifiers.restrictRect({ restriction: '.items', //change this endOnly: true }) ], autoScroll: true, // dragMoveListener from the dragging demo above listeners: { move: dragMoveListener } })
.itemstodrop { touch-action: none; user-select: none; } #inner-dropzone { height: 80px; }.dropzone { background-color: #ccc; border: dashed 4px transparent; border-radius: 4px; margin: 10px auto 30px; padding: 10px; width: 80%; transition: background-color 0.3s; }.drop-active { border-color: #aaa; }.drop-target { background-color: #29e; border-color: #fff; border-style: solid; }.drag-drop { display: inline-block; min-width: 40px; padding: 2em 0.5em; color: #fff; background-color: #29e; border: solid 2px #fff; touch-action: none; -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); transition: background-color 0.3s; }.drag-drop.can-drop { color: #000; background-color: #4e4; }
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script> <div class="items"> <p style="padding-top: 20px; font-size:18px">Stacked Rigs</p> <div style="height: auto;overflow: scroll"> <div id="itemstodrop" class="drag-drop itemstodrop"> item 1 </div> <div id="itemstodrop" class="drag-drop itemstodrop"> item 2 </div> <div id="itemstodrop" class="drag-drop itemstodrop"> item 3 </div> <div id="itemstodrop" class="drag-drop itemstodrop"> item 4 </div> <div id="itemstodrop" class="drag-drop itemstodrop"> item 5 </div> <div id="itemstodrop" class="drag-drop itemstodrop"> item 6 </div> <div id="itemstodrop" class="drag-drop itemstodrop"> item 7 </div> <div id="itemstodrop" class="drag-drop itemstodrop"> item 8 </div> <div id="itemstodrop" class="drag-drop itemstodrop"> item 9 </div> <div id="itemstodrop" class="drag-drop itemstodrop"> item 10 </div> <div id="itemstodrop" class="drag-drop itemstodrop"> item 11 </div> <div id="itemstodrop" class="drag-drop itemstodrop"> item 12 </div> <!--put this inside div--> <div id="inner-dropzone" class="dropzone">Drop here</div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.