android h5 拉起 h5拖拽

转载

云中谁寄锦书来 2023-06-30 12:29:22

文章标签 android h5 拉起数据 H5 拖拽 文章分类 Android 移动开发

知识点一：H5拖拽

1、设置元素为可拖放

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

2、拖动什么 ondragstart和setData()

然后，规定当元素被拖动时，ondragstart属性调用了一个函数，start(event)，它规定了被拖动的数据。

在所有的拖放事件中都提供了一个数据传输对象dataTransfer，主要是用于在源对象和目标对象之间传递数据。setData()存入源对象的数据第一个参数是存的数据类型，第二个是存的数据

3、放到何处 ondragover

ondragover事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

4、进行放置 ondrop

当放置被拖数据时，会发生drop事件。

5、原理：

<div  id="div1"  ondrop="drop(event)"  ondragover="over(event)"></div>
<img id="img1" src="images/logo.png" draggable="true" ondragstart="event(event)" >

1、定义方法

//开始拖拽
              function start(event){
                     //dataTransfer.setData  设置属性
//相当于设置一个属性用来存储img的id值，目的：反方便再放下的时候可以知道放下的是谁
                     event. dataTransfer.setData(‘a’,event.target.id);
}

准备放下

function drop(event){
       event.preventDefault();//阻止事件的默认行为
       var data=event. dataTransfer.getData(‘a’);
       document.getElementById(‘box’).appendChild(document.getElementById(data));
}

已经放下

function over(event){
       event.preventDefault();//阻止事件的默认行为
}

知识点二：H5绘图

1、创建一个画布（Canvas）

一个画布在网页中是一个矩形框，通过<canvas>元素来绘制。注意:默认情况下<canvas>元素没有边框和内容。

属性：height、width

<canvas id="myCanvas" width="200" height="100" style="border:1pxsolid#000000;"></canvas>

2、使用JavaScript来绘制图像

//1、获取元素

var c=document.getElementById("myCanvas");

//2、告诉浏览器用什么方式渲染

var ctx=c.getContext(‘2d’);

//3、开始画图

//分析，学会画直线，画圆
ctx.fillStyle=’red’;

//(1)、画矩形，第一个参数X轴坐标，第二个参数Y轴坐标，第三个参数矩形的宽，第四个参数矩形的高

ctx.fillRect(0,0,150,50);

//(2)、画线

ctx.moveTo(0,0);//起始坐标
ctx.lineTo(150,150);//结束坐标
ctx.strokeStyle=’blue’;//填充颜色
ctx.stroke();//画线

//(3)、画圆

ctx.beginPath();

//第一个参数X轴坐标，第二个参数Y轴坐标，第三个参数圆的半径，第四个参数圆的起始位置，第五个参数圆的结束位置，第六个参数方向(true代表逆时针方向，false代表顺时针方向，默认是false)

ctx.arc(100,100,100,0,2*Math.PI,true);
//填充颜色
ctx.fillStyle=’red’;
ctx.fill();
ctx.stroke();

//(4)、画文本

ctx.font=’30px Arial’;
ctx.fillText(‘Hello’,100,100);

//(5)、渐变填色

createLinearGradient(x,y,x1,y1)创建线条渐变，第一个参数X轴坐标，第二个参数Y轴坐标，第三个参数扩散半径，第四个参数

createRadialGradient(x,y,r,x1,y1,r1)创建一个径向/圆渐变，前三个参数为起始圆的坐标及半径，后三个参数为终止圆的坐标及半径

ctx.font=’30px Arial’；
var grad=ctx.createLinearGradient(0,0,c.width,0);
grad.addColorStop(‘0’,’red’);
grad. addColorStop (‘1’,’green’);
ctx.fillStyle=grad;
ctx.fillText(‘Hello’,100,100);

知识点三：H5的web存储

1、localStorage对象

用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

不管是localStorage，还是sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

(1)、保存数据：localStorage.setItem(key,value);

(2)、读取数据：localStorage.getItem(key);

(3)、删除单个数据：localStorage.removeItem(key);

(4)、删除所有数据：localStorage.clear();

(5)、得到某个索引的key：localStorage.key(index);

2、sessionStorage对象

sessionStorage方法针对一个session进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

3、cookie