将块从左侧容器拖到右侧容器后，它会从左侧容器中移除。如何防止从左侧容器中移除并且应该拖放多次相同？
我试过这段代码，但它对我不起作用。
需要实现 - 它不应该在拖到正确的容器后被删除它应该总是在那里拖动多次
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure JS DnD!</title>
</head>
<body>
<div class="container">
<div class="left">
<h4>Blocks</h4>
<div class="blocks" id="blocks">
<div draggable="true" class="block" data-block="1">Test Block 1 H1</div>
<div draggable="true" class="block" data-block="2">Test Block 1 H2</div>
<div draggable="true" class="block" data-block="3">Test Block 1 H3</div>
<div draggable="true" class="block" data-block="4">Test Block 1 button</div>
</div>
</div>
<div class="handle" id="handle"></div>
<div class="right"></div>
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body, html {
position: relative;
}
.container {
position: fixed;
width: 100%;
height: 100%;
display: flex;
}
.container > .left {
position: relative;
height: 100%;
border: 1px solid rgba(0,0,0,0.2);
flex-grow: 1;
flex-shrink: 0;
flex-basis: 35%;
min-width: 300px;
}
.container > .left > .blocks {
display: flex;
flex-direction: column;
width: 100%;
}
.container > .left > h4 {
font-family: 'Roboto';
font-weight: bold;
margin: 10px auto;
font-size: 18px;
text-align: center;
}
.container > .left > .blocks > .block {
width: 100%;
padding: 10px 15px;
margin-top: 5px;
border: 1px solid rgba(0,0,0,0.2);
cursor: move;
}
.block.dragging {
opacity: .5;
}
.container > .right {
width: 100%;
height: 100%;
border: 1px solid rgba(0,0,0,0.2);
flex-grow: 0;
flex-shrink: 1;
overflow-x: auto;
}
.container > .handle {
background-color: rgba(0,0,0,0.4);
content: '';
width: 7px;
cursor: col-resize;
flex-grow: 0;
flex-shrink: 0;
margin: 0 0 0 auto;
}
Javascript
const blocksData = [
{
id: 1,
label: 'Test Content',
htmlContent: '<h1>Test Content</h1>'
},
{
id: 2,
label: 'Test Content',
htmlContent: '<h2>Test Content</h2>'
},
{
id: 3,
label: 'Test Content',
htmlContent: '<h3>Test Content</h3>'
},
{
id: 4,
label: 'Test Content',
htmlContent: '<button>Test Content</button>'
},
];
const getDragAfterElement = (container, y) => {
console.log("Test 1");
const draggableElements = [...container.querySelectorAll('.block:not(.dragging)')]
return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect()
const offset = y - box.top - box.height / 2
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child }
} else {
return closest
}
}, { offset: Number.NEGATIVE_INFINITY }).element
}
const initiateHandler = () => {
console.log("Test 2");
const left = document.getElementsByClassName("left")[0];
const handle = document.getElementById("handle");
handle.draggable = true;
handle.addEventListener("mousedown", (e) => {
ismdwn = 1
document.body.addEventListener('mousemove', (e) => mV(e,left))
document.body.addEventListener('mouseup', (e) => end(e,handle))
});
}
const onReady = () => {
console.log("Test 3");
initiateHandler();
const drggableBlocksHolder = document.getElementById("blocks");
blocksData.map((block) => {
if(!document.querySelector("#blocks > div:nth-child(4)")) drggableBlocksHolder.innerHTML += `<div draggable="true" class="block" data-block="${block.id}">${block.htmlContent}</div>`;
});
document.right = document.getElementsByClassName("right")[0];
document.draggables = blocks.getElementsByClassName("block");
document.draggable = document.querySelector('.dragging');
for (let index = 0; index < document.draggables.length; index++) {
const draggable = document.draggables[index];
draggable.addEventListener('dragstart', () => {
draggable.classList.add('dragging')
});
draggable.addEventListener('dragend', () => {
draggable.classList.remove('dragging')
});
}
document.right.addEventListener('dragover', (e) => {
console.log("Test 4");
e.preventDefault();
document.draggables = blocks.getElementsByClassName("block");
document.draggable = document.querySelector('.dragging');
const afterElement = getDragAfterElement(document.right, e.clientY)
if (afterElement == null) {
id = document.draggable.getAttribute('data-block')
document.draggable.innerHTML = blocksData[id-1].htmlContent;
document.right.appendChild(document.draggable)
} else {
document.right.insertBefore(document.draggable, afterElement)
}
});
};
const mV = (event, left) => {
console.log("Test 5");
if (ismdwn === 1) {
left.style.flexBasis = event.clientX + "px"
} else {
end()
}
}
const end = (e) => {
console.log("Test 6");
ismdwn = 0
document.body.removeEventListener('mouseup', end)
handle.removeEventListener('mousemove', mV)
}
(function() {
console.log("Test 7");
onReady()
})();