鼠标位置跟随
<div id="target" style="width: 100px;height: 100px; background: red;position: absolute;"></div>
<script>
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';
}
}
}
</script>
元素拖放（Drag 和 Drop）
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
1、设置元素为可拖放，将其 draggable 属性设置为 true。
<img draggable="true" src="./demo.jpg"/>
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。
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
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代码。
<div id="one" style="widows: 200px;height: 200px;border: 1px solid red"></div>
<img id="two" draggable="true" src="./demo.jpg" />
<script>
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("放置目标");
}
}
</script>
