html 布局 拖拽 在线,js+html5拖拽demo+grid+column 布局

drag

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;

}

let list = []

for(let i = 0; i <= 14; i++) {

list.push({

id: i,

sortId: i,

text: i,

name: 'item'

})

}

let htmlDragList = list.map(item =>

`

data-sortId="${item.sortId}"

data-id="${item.id}">

${item.text}

`).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')

}