js+html5拖拽demo+grid+column 布局

最新推荐文章于 2021-12-21 22:03:04 发布

chuohao3843

最新推荐文章于 2021-12-21 22:03:04 发布

阅读量379

点赞数

原文链接：https://my.oschina.net/igoryuyu/blog/1942561

版权

<!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>

有时间会抽象为插件github

转载于:https://my.oschina.net/igoryuyu/blog/1942561

chuohao3843

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js+html5拖拽demo+grid+column 布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>drag</title> <style> html...
复制链接

扫一扫