zoukankan      html  css  js  c++  java
  • HTML5拖放

    HTML5拖放

    (1)、什么是拖放

    1、拖放是一种常见的特性,即抓取对象以后拖到另一个位置

    (2)、HTML5拖放实例

    <script> ev可以实现内容共通。  dataTransfer  html5 新加对象

    <script> ev可以实现内容共通。  dataTransfer  html5 新加对象
    Function allowDrop(ev)
    {
    ev.preventDefault();
    }
    Function drag(ev)
    {
    ev.dataTransfer.setData("Text",ev.target.id);
    }
    functiondrop(ev)
    {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    }
    </script>
    <p>拖动RUNOOB.COM图片到矩形框中:</p>
    <div id="div1"ondrop="drop(event)"ondragover="allowDrop(event)"></
    div>
    <br>
    <img id="drag1" src="/images/logo.png" draggable="true" ondragstart=
    "drag(event)"width="336"height="69">
    

     

    (3)、设置元素为可拖放

    首先,为了使元素可拖动,把draggable属性设置为true:

    <img draggable="true">

    (4)、拖动 方法-ondragstart和setData() 设置元素 元素要进行

    setData()存入源对象的数据  getData(“属性名”)获取属性值

    第一个参数是存的数据类型(也可以是属性名),第二个是存的数据(也可以是属性值  可以把其他属性的值赋给属性值)

    Function drag(ev){

    ev.dataTransfer.setData("Text",ev.target.id);

    }

    Text是一个DOM String表示要添加到dragobject的拖动数据的类型。值是可

    拖动元素的id("drag1")。

    ondrop放下  ondropover 放完松手

    放到何处-ondragover

    进行放置-ondrop

  • 相关阅读:
    瞬间从IT屌丝变大神——HTML规范
    瞬间从IT屌丝变大神——命名规则
    瞬间从IT屌丝变大神——分工安排
    写在开发前的话
    完全二叉树的权值
    无法更改电脑默认浏览器
    java语法错误,进行分析时已经到达文件结尾
    查找SHA1值
    关闭CPU 睿频方法
    Java idea 快捷键
  • 原文地址:https://www.cnblogs.com/wenaq/p/13526221.html
Copyright © 2011-2022 走看看