鼠标位置跟随

<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>