• 拖动对象ondrag


    说明:

    在进行拖放操作时,dataTransfer 对象用来保存被拖动的数据。它可以保存一项或多项数据、一种或者多种数据类型。dataTransfer对象有两个主要的方法:getData()方法和setData()方法。

    setData("Text",ev.target.id):用指定的数据格式把数据插入 DataObject 对象。

    语法 object.SetData [data],[format]

    getData()方法可以取得由setData()方法保存的值。setData()方法的第一个参数,也是getData()方法唯一的一个参数,是用来保存数据类型的字符串,取值是”text”或”URL”。

    实现步骤:

    1、对要拖动的对象定义draggable="ture"

    2、在要拖动的对象上定义ondragstart="drag(event)"

    3、在目标对象上定义ondragover="allowdrag(event)"和ondrop="drop(event)"

    拖拽相关方法:

    ondragstart 拖拽前触发

    ondragend 拖拽结束触发 

    ondragenter 相当于onmouseover

    ondragleave 相当于onmouseout

    ondragover 进入目标、离开目标之间,连续触发

    ondrop 释放鼠标的时候触发

    preventDefault() 阻止默认事件

  • 相关阅读:
    新的开始
    react的setState使用中遇到的问题
    h5的input的required使用中遇到的问题
    vue学习中v-if和v-show一起使用的问题
    异步 JavaScript 之 macrotask、microtask
    .eslintrc 文件
    Vue2学习结合bootstrapTable遇到的问题
    Vue2学习(3)
    ES6 箭头函数
    Vue2学习(2)
  • 原文地址:https://www.cnblogs.com/caiquan/p/6249959.html
Copyright © 2020-2023  润新知