58 lines
2.1 KiB
HTML
58 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>DnD behavior probe</title>
|
|
<style>
|
|
#src, #target, #target2 { margin: 20px; padding: 16px; border: 1px solid #888; }
|
|
#src { background: #ddf; cursor: grab; }
|
|
#target { background: #dfd; }
|
|
#target2 { background: #fdd; }
|
|
#log { white-space: pre-wrap; font-family: monospace; font-size: 12px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="src" draggable="true">source (field 42)</div>
|
|
<div id="target">group target</div>
|
|
<div id="target2">group target 2</div>
|
|
<pre id="log"></pre>
|
|
<script>
|
|
const log = document.getElementById('log')
|
|
function out(...args) { log.textContent += args.join(' ') + '\n' }
|
|
|
|
document.getElementById('src').addEventListener('dragstart', (e) => {
|
|
out('[dragstart]')
|
|
try {
|
|
e.dataTransfer.effectAllowed = 'copy'
|
|
e.dataTransfer.setData('application/fms-field', '42')
|
|
e.dataTransfer.setData('text/plain', '张三')
|
|
} catch (err) { out('[dragstart err]', err.message) }
|
|
})
|
|
document.getElementById('src').addEventListener('dragend', (e) => {
|
|
out('[dragend] effectAllowed=', e.dataTransfer ? e.dataTransfer.effectAllowed : 'none')
|
|
})
|
|
|
|
for (const id of ['target', 'target2']) {
|
|
const el = document.getElementById(id)
|
|
el.addEventListener('dragenter', (e) => out('[dragenter ' + id + ']'))
|
|
el.addEventListener('dragover', (e) => {
|
|
e.preventDefault()
|
|
const dt = e.dataTransfer
|
|
out('[dragover ' + id + '] getData(custom)=', JSON.stringify(dt.getData('application/fms-field')),
|
|
'getData(text/plain)=', JSON.stringify(dt.getData('text/plain')),
|
|
'types=', JSON.stringify(Array.from(dt.types || [])),
|
|
'effectAllowed=', JSON.stringify(dt.effectAllowed))
|
|
})
|
|
el.addEventListener('drop', (e) => {
|
|
e.preventDefault()
|
|
const dt = e.dataTransfer
|
|
out('[drop ' + id + '] getData(custom)=', JSON.stringify(dt.getData('application/fms-field')),
|
|
'getData(text/plain)=', JSON.stringify(dt.getData('text/plain')),
|
|
'types=', JSON.stringify(Array.from(dt.types || [])),
|
|
'effectAllowed=', JSON.stringify(dt.effectAllowed))
|
|
})
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|