怎么给html增加鼠标跟随,HTML5笔记（一）——鼠标跟随与元素拖放

鼠标位置跟随

window.onload = function(){

var target = document.getElementById("target");

target.onmousedown = function(){

document.onmousemove = function(e){

one.style.left = e.clientX+'px';

one.style.top = e.clientY+'px';

}

}

}

元素拖放(Drag 和 Drop)

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

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

1、设置元素为可拖放，将其 draggable 属性设置为 true。

2、开始拖动元素— ondragstart。

function drag(ev)

{

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

console.log("拖拽开始");

}

当开始拖动元素时， ondragstart属性调用drag(event)函数，规定了被拖动的数据。

其中dataTransfer.setData()方法设置被拖数据的数据类型"Text"和值ev.target.id。

注意：拖放之后Firefox会对setData()里设置的值进行搜索。

3、规定放置区域 — ondragover。

function allowDrop(ev)

{

ev.preventDefault();

}

目标元素div的ondragover 属性规定在何处放置被拖动的元素。

默认地，无法将数据/元素放置到其他元素中。

所以想要设置允许放置，我们必须在 ondragover 事件里调用event.preventDefault() 方法阻止对元素的默认处理方式。

4、放置元素 — ondrop。

function drop(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

在上一步中，当放置被拖元素时ondrop 属性调用了drop(event)函数。

同事还要调用 preventDefault()来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)。

通过 dataTransfer.getData("Text")方法获得被拖的数据。该方法将返回在 dataTransfer.setData() 方法中设置为相同类型的任何数据 id ("theImg")。

把被拖元素追加到目标元素中。

5、 示例Demo

还有一些具体拖放事件，下面是完整Demo代码。

window.onload = function(){

var one = document.getElementById("one");

var two = document.getElementById("two");

//拖拽区事件

two.ondragstart = function(e){

e.dataTransfer.setData("Text","data from two");

console.log("拖拽开始");

}

two.ondrag = function(){

console.log("位置移动");

}

two.ondragend = function(){

console.log("移动结束");

}

//投放区事件

//dragenter和dragover可能会受到默认浏览器的影响，使ondrap事件失效。

//所以要在这两个事件中使用e.preventDefault();来阻止浏览器默认事件。

one.ondragenter = function(e){

console.log("进入投放区");

e.preventDefault();

}

one.ondragover = function(e){

console.log("规定投放位置");

e.preventDefault();

}

one.ondragleave = function(){

console.log("离开投放区");

}

one.ondrop = function(e){

e.preventDefault();

var data=e.dataTransfer.getData("Text");

one.append(two);

console.log("放置目标");

}

}