zoukankan      html  css  js  c++  java
  • HTML5元素拖放设置总结

    将元素图片放入div盒子内

    1、首先设置元素为可拖放:在img标签内加入draggable=”true”.

    <img draggable="true">

    2、设置元素的拖动:在img标签中用ondragstart属性调用一个函数drag(ev),这个函数中用dataTransfer.setData()方法设置了被拖数据的数据类型和值.

    <img ondragstart=”drag(event)”>

    function drag(ev){

          ev.dataTansfer.setData(“Text”,ev.target.id)//数据类型是Text,值是可拖动元素的id(“drag1”)。

    }

    3、放到何处-ondragover

    在被放置的div中用ondragover来规定设置的允许设置,因为默认无法将数据/元素放置到其他元素中,如果需要允许放置,必须阻止对元素默认的处理方式。

    这时候用ondragover来调用一个函数alloeDrop(ev),函数内部规定了event.preventDefault()方法用来阻止元素的默认处理方式

    <div ondragover=”allowDrop(event)”></div>

    function allowDrop(ev){

          ev.prentDefault();

    }

    4、下面就是放置了-ondrop

    在被放置的div中设置ondrop=”drop(event)”调用drop(ev)函数,函数中规定了放置的过程。

    <div ondrop="drop(event)"></div>

    Function drop(ev){

          ev.preventDefault();//用来避免浏览器对数据的默认处理

    •   var data=ev.dataTransfer.getData(”Text”);// 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

          ev.target.appendChild (document.getElementById(data));// 被拖数据是被拖元素的 id ("drag1")把被拖元素追加到放置元素(目标元素)中

    }

  • 相关阅读:
    Smali基本语法
    图片智能缩小
    How to install ia32-libs in Ubuntu 14.04 LTS (Trusty Tahr)
    [操作系统][Ubuntu 14.04] 安装Flash 安装QQ2013
    eclipse在Ubuntu 13.04下的安装过程及问题小记
    Android系统手机端抓包方法
    Android 开源框架ActionBarSherlock 和 ViewPager 仿网易新闻客户端
    试用Android Annotations
    Android Annotations 介绍
    盘点国内Android移动广告平台的现状
  • 原文地址:https://www.cnblogs.com/this-xiaoming/p/5538375.html
Copyright © 2011-2022 走看看