wsemi
Version:
A support package for web developer.
65 lines (53 loc) • 2.08 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>examples for domDrag</title>
<!-- @babel/polyfill已廢棄 -->
<script nomodule src="https://cdn.jsdelivr.net/npm/@babel/polyfill@7.12.1/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wsemi@1.7.19/dist/wsemi.umd.js"></script>
<script>
let log = console.log
console.log = function(){
log.apply(null, arguments)
wsemi.bodyLog.apply(null, arguments)
}
</script>
</head>
<body>
<div id="panel" style="user-select:none; cursor:pointer;">
<div style="padding:5px;" draggroup="group" dragindex="0">item[0]</div>
<div style="padding:5px;" draggroup="group" dragindex="1">item[1]</div>
<div style="padding:5px;" draggroup="group" dragindex="2">item[2]</div>
<div style="padding:5px;" draggroup="group" dragindex="3">item[3]</div>
<div style="padding:5px;" draggroup="group" dragindex="4">item[4]</div>
</div>
<script>
let dds = []
for(let i=0;i<=4;i++){
//domDrag
let dd = wsemi.domDrag(document.querySelector('[dragindex="'+i+'"]'), { attIndex: 'dragindex', attGroup: 'draggroup', group:'group' })
dd.on('change', function(msg) {
//console.log(i+'-change', msg)
})
dd.on('start', function(msg) {
console.log(i+'-start', msg)
})
dd.on('move', function(msg) {
//console.log(i+'-move', msg)
})
dd.on('enter', function(msg) {
console.log(i+'-enter', msg)
})
dd.on('leave', function(msg) {
console.log(i+'-leave', msg)
})
dd.on('drop', function(msg) {
console.log(i+'-drop', msg)
})
//push
dds.push(dd)
}
</script>
</body>
</html>