原生js拖拽（面向对象）

Posted 2020-08-11

代码地址：http://files.cnblogs.com/files/fxnet/%E5%8E%9F%E7%94%9Fjs%E6%8B%96%E6%8B%BD%EF%BC%88%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%EF%BC%89.rar

<style>
img
{
width: 200px;
height: 200px;
}
.fx_drag
{
background: green;
width: 300px;
height: 500px;
float: left;
}
p
{
float: left;
margin-top: 0;
}
p img
{
float: left;
}
#end, #end2
{
background: red;
width: 300px;
height: 500px;
float: left;
margin-left: 500px;
}
.imgMoveing
{
position: absolute;
cursor: move;
}
.imgEnd
{
position: absolute;
transition: all 1s;
}
.div1
{
float: left;
width: 100%;
margin-bottom: 20px;
}
</style>
<div class="div1">
<div id="star" class="fx_drag">
<p>
<img draggable="false" fx_drag="true" src="46354375_950.jpg" /></p>
<p>
<img draggable="false" fx_drag="true" src="Focus_Monster-821_Concept-01_634x357_[634x357]8488546.png" /></p>
<p>
<span fx_drag="true">adasdadasd</span>
</p>
</div>
<div id="end">
</div>
</div>
<div>
<div id="star2" class="fx_drag">
<p>
<img draggable="false" fx_drag="true" src="46354375_950.jpg" /></p>
<p>
<img draggable="false" fx_drag="true" src="Focus_Monster-821_Concept-01_634x357_[634x357]8488546.png" /></p>
<p>
<span fx_drag="true">adasdadasd</span>
</p>
</div>
<div id="end2">
</div>
</div>
<script>
Object.extend = function (destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
var drag = function (options) {
var div_star;
var div_end;
this.options = {};
if (typeof options == "string") {
this.options.div_star = document.querySelector(options);
this.options.div_end = document.getElementById("end");
this.options.cloneNode = false;
}
else
this.options = Object.extend(this.options, options);
this.init();
}
drag.prototype.init = function () {
var self = this;
this.params = {
drag_star: false, //是否开始拖放
drag_success: false, //是否进入拖放区域
div_end: self.options.div_end, //目标容器
div_end_params: {
x: self.options.div_end.offsetLeft, //容器的所在位置x
y: self.options.div_end.offsetTop, //容器的所在位置y
width: self.options.div_end.offsetWidth, //容器宽度
height: self.options.div_end.offsetHeight//容器高度
},
move_obj: {}
};
var drag_list = self.options.div_star.querySelectorAll("[fx_drag=true]");
for (var i = 0; i < drag_list.length; i++) {
drag_list[i].onmousedown = function () {
self.fx_drag(‘star‘, event, this);
}
drag_list[i].onmousemove = function () {
self.fx_drag(‘move‘, event, this);
}
drag_list[i].onmouseup = function () {
self.fx_drag(‘end‘, event, this);
}
drag_list[i].onmouseout = function () {
self.fx_drag(‘end‘, event, this);
}
}
}
drag.prototype.fx_drag = function (type, event, obj) {
switch (type) {
case "star":
if (obj.className == "") {
this.params.drag_star = true; //鼠标已经按下
this.params.move_obj.x = event.x; //鼠标所在位置x
this.params.move_obj.y = event.y; //鼠标所在位置y
this.params.move_obj.offset = { x: obj.offsetLeft, y: obj.offsetTop }; //元素所在位置x，y
this.params.move_obj.width = obj.offsetWidth; //图片宽度
this.params.move_obj.height = obj.offsetHeight; //图片高度
}
break;
case "move":
if (this.params.drag_star) {
obj.className = "imgMoveing"; //设置图片的样式为拖动中样式
var XX = event.x - this.params.move_obj.x; //鼠标位置-鼠标落下位置=实际拖动像素x
var YY = event.y - this.params.move_obj.y; //鼠标位置-鼠标落下位置=实际拖动像素y
var NowX = this.params.move_obj.offset.x + XX; //图片原始位置+拖动像素x=当前图片应在位置x
var NowY = this.params.move_obj.offset.y + YY; //图片原始位置+拖动像素x=当前图片应在位置y
obj.style.left = NowX; //设置图片位置
obj.style.top = NowY; //设置图片位置
//判断图片是否进入容器
if (NowX > this.params.div_end_params.x && NowX < this.params.div_end_params.x + this.params.div_end_params.width - this.params.move_obj.width
&& NowY > this.params.div_end_params.y && NowY < this.params.div_end_params.y + this.params.div_end_params.height - this.params.move_obj.height)
this.params.drag_success = true;
else
this.params.drag_success = false;
}
break;
case "end":
//鼠标按下才会触发
if (!this.params.drag_star)
return;
this.params.drag_star = false;
//如果进入容器 把图片加入容器 并且把当前图片所有拖动属性清空
if (this.params.drag_success) {
if (this.options.cloneNode) {
var newNode = obj.parentNode.cloneNode(true);
newNode.children[0].onmousedown = null;
newNode.children[0].onmousemove = null;
newNode.children[0].onmouseup = null;
newNode.children[0].className = "";
newNode.children[0].removeAttribute("style");
newNode.children[0].removeAttribute("fx_drag");
this.params.div_end.appendChild(newNode);

obj.style.left = this.params.move_obj.offset.x;
obj.style.top = this.params.move_obj.offset.y;
obj.className = "";
} else {
obj.onmousedown = null;
obj.onmousemove = null;
obj.onmouseup = null;
obj.className = "";
this.params.div_end.appendChild(obj.parentNode);
}
this.params.move_obj = {};
} else {
//没有进入容器 按原位置返回，并且加入返回时间 1s内返回
obj.className = "imgEnd";
var self = this;
setTimeout(function () {
obj.style.left = self.params.move_obj.offset.x;
obj.style.top = self.params.move_obj.offset.y;
self.params.move_obj = {};
}, 20);
setTimeout(function () {
obj.className = "";
}, 1000);
}
break;
}
return false;
}
var aa = new drag("#star");
var bb = new drag({
div_star: document.getElementById("star2"),
div_end: document.getElementById("end2"),
cloneNode:true
});

console.log(aa);
console.log(bb);

</script>

http://files.cnblogs.com/files/fxnet/%E5%8E%9F%E7%94%9Fjs%E6%8B%96%E6%8B%BD%EF%BC%88%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%EF%BC%89.rar