知识点(鼠标跟随)：

mousedown: 当用户用鼠标点击在某一元素上就会触发该事件

mouseover:  当鼠标指针在某一元素上移动就会触发改事件

下面这个例子的效果就是鼠标点击元素后，元素跟着鼠标移动

独秀不爱秀

* {

padding: 0;

margin: 0;

}

#one {

width: 100px;

height: 100px;

background-color: red;

position: absolute;

}

window.onload = function () {

var one = document.getelementbyid('one');

// mousedown鼠标事件：当用户点击鼠标在元素上就会触发该事件

one.addeventlistener('mousedown', function () {

// mousemove 鼠标事件：当鼠标指针在元素上移动就会触发此事件

/**

* e：指事件，在火狐浏览器中事件用window.event,所以只有把 event

* 所以只有把event传给函数使用。为了兼容火狐和浏览器，一般会在函数里自动

* 重新赋值: e = e || window.event;

*/

document.addeventlistener('mousemove', function (e) {

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

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

});

});

}

知识点(鼠标拖拽)

dragstart: 用户开始拖拽时触发该事件

drag:        用户正在拖拽时触发该事件

dragend:  用户结束拖拽时触发该事件

以上3个事件的控制对象为被拖拽的元素 (整个过程我们可以称之为拖拽区)

dragenter: 当被拖拽的元素对象进入其容器范围内时触发该事件

dragover:  当被拖拽的元素对象在其容器范围内拖拽时触发该事件

dragleave: 当被拖拽的元素对象离开其容器范围内触发该事件

drop:          在一个拖拽过程中，鼠标释放触发该事件

以上4个事件的控制对象为被拖追元素的目的容器(整个过程我们可以称之为投放区)

实例1(将一个容器拖放到另一个容器中)

独秀不爱秀

* {

padding: 0;

margin: 0;

}

#one {

width: 200px;

height: 200px;

border: 1px solid rebeccapurple;

}

#two {

width: 100px;

height: 100px;

background-color: red;

cursor: pointer;

}

window.onload = function () {

function $(id) {

return document.getelementbyid(id);

}

// 鼠标拖拽事件(注意控制对象为被拖拽的元素)

// dragstart: 用户开始拖拽时触发

$('two').addeventlistener('dragstart', function (e) {

// $('one').innerhtml = '开始拖拽';

});

// drag: 用户正在拖拽时触发

$('two').addeventlistener('drag', function (e) {

// $('one').innerhtml = '移动当中';

});

// dragend:用户结束拖拽时触发

$('two').addeventlistener('dragend', function (e) {

// $('one').innerhtml = '移动结束';

});

// 投放过程事件(注意控制对象为拖拽元素的目的地元素)

// dragenter: 当被拖拽的元素对象进入其范围内时触发

$('one').addeventlistener('dragenter', function (e) {

// $('one').innerhtml = '进入';

e.preventdefault(); // 阻止默认事件

});

// dragover: 当被拖拽的元素对象在该容器范围内拖拽时触发

$('one').addeventlistener('dragover', function (e) {

// $('one').innerhtml += '我就在里面';

e.preventdefault(); // 阻止默认事件(拖动的默认事件为在新窗口中打开)

});

// dragleave: 当被拖拽的元素对象离开其容器范围内触发

$('one').addeventlistener('dragleave', function (e) {

// $('one').innerhtml += '离开';

e.preventdefault(); // 阻止默认事件

});

// 投放事件(注意控制对象为拖拽元素的目的地元素)

// drop: 在一个拖动过程中，鼠标释放触发

$('one').addeventlistener('drop', function () {

$('one').appendchild($('two'));

});

}

实例2(文件拖拽上传)

前端代码：

独秀不爱秀

* {

margin: 0;

padding: 0;

}

#box {

width: 200px;

height: 200px;

border: 2px dashed #ccc;

}

var box = document.getelementbyid('box');

box.addeventlistener('dragenter', function (e) {

e.preventdefault();

});

box.addeventlistener('dragover', function (e) {

box.innerhtml = '已有东西进入，请松开';

e.preventdefault();

});

box.addeventlistener('dragleave', function (e) {

box.innerhtml = '赶紧回来';

e.preventdefault();

});

box.addeventlistener('drop', function (e) {

box.innerhtml = '已经松开';

// console.log(e.datatransfer.files[0]);

// lastmodified: 1561646705661

// lastmodifieddate: thu jun 27 2019 22: 45: 05 gmt + 0800(中国标准时间) { }

// name: "个人简历.pdf"

// size: 196022

// type: "application/pdf"

var file = e.datatransfer.files[0];

var fd = new formdata();

fd.append('pic', file);

var xhr = new xmlhttprequest();

xhr.open('post', '3-3.php');

xhr.send(fd);

xhr.addeventlistener('readystatechange', function () {

if (this.readystate === 4) {

// console.log(1111);

// console.log(this.responsetext);

box.innerhtml += this.responsetext;

}

});

e.preventdefault();

});

后端代码(php实现)：

if (isset($_files)) {

$orgin = $_files['pic']['tmp_name'];

$target = $_files['pic']['name'];

$moved = move_uploaded_file($orgin, './' . $target);

if (!$moved) {

echo '上传失败';

}

echo ', 且上传成功';

}

当我们将某一文件(这里我用一张图片)拖f放到这个容器中后，这个图片就到了这个指定得文件夹中。