<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>drag</title>
<style>
html,body{
padding: 0;
margin: 0;
background-color: #f5f5f5;
}
#column,
#grid{
font-size: 30px;
padding-right: 10px;
padding-top: 10px;
box-sizing: border-box;
}
#column .item,
#grid .item{
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
margin-bottom: 10px;
margin-left: 10px;
border:1px solid #eee;
box-sizing: border-box;
min-height: 260px;
}
#column{
-webkit-column-count: 5;
column-count: 5;
column-gap: 0;
}
#column .item{
background-color: #fff;
break-inside: avoid !important;
}
#grid{
display: grid;
grid-template-columns: auto auto auto auto auto; /*5列*/
grid-gap: 0;
}
#grid .item{
background-color: lightblue;
}
</style>
</head>
<body>
<div id="column"></div>
<div id="grid"></div>
<script>
let list = []
for(let i = 0; i <= 14; i++) {
list.push({
id: i,
sortId: i,
text: i,
name: 'item'
})
}
let htmlDragList = list.map(item =>
`<div class="item" id="${item.sortId}"
data-sortId="${item.sortId}"
data-id="${item.id}">
${item.text}
</div>`).join('')
document.__proto__.onReady = function() {}
const timer = setInterval(() => {
if(document.readyState === 'complete'){
document.onReady()
clearInterval(timer)
}
}, 100)
const _insertHtml = function(selector, html) {
if(!selector) return
return document.querySelector(selector).innerHTML = html
}
const _mount = function() {
// _insertHtml('#column', htmlDragList)
_insertHtml('#grid', htmlDragList)
}
const _dragstart = function(element){ //当拖动操作开始时运行脚本
if(!element) return
element.addEventListener('dragstart', (event) => {
const id = event.dataTransfer.setData("Text",event.target.id)
console.log('setData', event.target.id)
}, null)
}
const _setAttribute = function(element){
if(!element) return
return element.setAttribute('draggable', true)
}
const _drag= function() { //当拖动元素时运行脚本
}
const _dragleave= function() {//当元素离开有效拖放目标时运行脚本
}
const _dragover = function(element) {//当元素被拖动至有效拖放目标上方时运行脚本
if(!element) return
element.addEventListener('dragover', (event) => {
event.preventDefault()
}, null)
}
const _dragend = function(element) { //当拖动操作结束时运行脚本
if(!element) return
element.addEventListener('dragend', (event) => {
event.preventDefault()
}, null)
}
const _dragenter = function() {//当元素被拖动至有效的拖放目标时运行脚本
}
const _drop = function(element) {//当被拖动元素正在被拖放时运行脚本
if(!element) return
element.addEventListener('drop', (event) => {
event.preventDefault()
// event.target.before(document.getElementById(event.dataTransfer.getData('Text')))
event.target.after(document.getElementById(event.dataTransfer.getData('Text')))
console.log('_drop',event.target.id)
}, null)
}
const _selector = function(selector) {
if(!selector) return
return document.querySelector(selector).children
}
const _handleBind = function(selector) {
const elements = _selector(selector)
if(!elements && !elements[0]) return
for(ele of elements) {
if(!ele.tagName) continue
_dragstart(ele)
_setAttribute(ele)
_dragenter(ele)
_dragover(ele)
_dragend(ele)
_drop(ele)
}
}
const _ummout = function() {
_destroy()
}
const _destroy = function() {
// element.removeEventListener()
}
document.onReady = function() {
_mount()
// _handleBind('#column')
_handleBind('#grid')
}
</script>
</body>
</html>
js+html5拖拽demo+grid+column 布局
费德宇
转载于:https://my.oschina.net/igoryuyu/blog/1942561
类似资料：