文档章节

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

igoryuyu
 igoryuyu
发布于 2018/09/04 23:27
字数 463
阅读 588
收藏 0
<!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

© 著作权归作者所有

igoryuyu
粉丝 0
博文 15
码字总数 31758
作品 0
徐汇
高级程序员
私信 提问
Android 用户界面---拖放(Drag and Drop)(一)

用Android的拖放框架,能够允许用户使用图形化的拖放手势,把数据从当前布局中的一个View对象中移到另一个View对象中。这个框架包括:拖拽事件类、拖拽监听器、以及辅助的方法和类。 尽管这个...

长平狐
2012/10/16
161
0
网站布局拖拽实现的疑问

我想实现如下拖拽效果,那么怎么样保存数据库呢? 1,用户可以自己设计html模板。然后制定:拖拽区域(如)无限制个数。 2,然后通过程序(php)读出这些拖拽区。在编辑界面时候,可以往这些...

落舞者
2013/07/10
710
5
一个可拖拽,移动,自由组合子控件的视图控件,让开发更简单

今天给大家推荐一个自由拖拽,自由组合的控件,这个控件是我自定义写的。通过它,我们可以自由拖拽,自由组合实现一个界面,满足一个用户自由组合界面的需求。这里不是通过自由拖拽控件,来快...

涩郎
2017/04/18
0
0
React 实现炫酷的可拖拽网格布局

前言 最近老板让做一个自定义面板,能够在面板上自由的拖拽,新增,删除组件。组件可以是各种echarts图形,通过各个组件的拖拽组合,从而让用户自定义想要看到的面板。需求就是这样,那么撸起...

Bilif
05/14
0
0
goweii/SwipeDragTreeRecyclerView

SwipeDragTreeRecyclerView 使用说明 GitHub 主页 功能 树形结构 RecyclerView 支持滑动删除 支持长按拖拽 支持单个 view 点击或长按时拖拽 可开启并更改滑动删除背景色 可自由指定滑动删除和...

goweii
2017/12/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
38分钟前
4
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
48分钟前
4
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
57分钟前
6
0
从零基础到拿到网易Java实习offer,我做对了哪些事

作为一个非科班小白,我在读研期间基本是自学Java,从一开始几乎零基础,只有一点点数据结构和Java方面的基础,到最终获得网易游戏的Java实习offer,我大概用了半年左右的时间。本文将会讲到...

Java技术江湖
昨天
5
0
程序性能checklist

程序性能checklist

Moks角木
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部