- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./dragula.css">
<style>
.answer-fill {
display: inline-block;
border: 1px solid #09f;
padding: 0 20px;
border-radius: 3px;
}
</style>
</head>
<body>
<ul class="questions">
<li>
<span>16Antarctica</span>
<span class="answer-fill">6</span>
</li>
<li>
<span>17South America</span>
<span class="answer-fill">7</span>
</li>
<li>
<span>16North America</span>
<span class="answer-fill">8</span>
</li>
</ul>
<ul class="answers">
<li>
A. The exchange rate was down.
</li>
<li>
B. He was late.
</li>
<li>
C. the computers weren't working
</li>
</ul>
<script src='./dragula.js'></script>
<script>
let tempAnswer = '';
const containers = Array.from(document.querySelectorAll('.answer-fill'));
containers.push(document.querySelector('.answers'))
const drake = dragula(containers, {
copy(el, source) {
return source === document.querySelector('.answers')
},
accepts(el, target) {
return target !== document.querySelector('.answers')
}
});
drake.on('over', (el, container, source) => {
if (container !== document.querySelector('.answers')) {
tempAnswer = container.innerHTML
container.innerHTML = ''
}
}).on('out', (el, container, source) => {
if (container !== document.querySelector('.answers')) {
container.innerHTML = tempAnswer
}
}).on('drop', (el, target, source, sibling) => {
tempAnswer = el.innerHTML
})
</script>
</body>
</html>
CDN https://www.bootcdn.cn/dragula/
| https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.css |
| https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.js |
