JS鼠标拖拽图片更换位置效果代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 JS鼠标拖拽图片更换位置效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>JS鼠标拖拽图片更换位置效果代码</title>
    <style>
        ul, li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul {
            padding: 5px;
            width: 480px;
            height: 640px;
            margin: 100px auto;
            position: relative;
            background:#3366cc;
        }

        li {
            width: 150px;
            height: 150px;
            margin: 5px;
            float: left;
            overflow: hidden;
            background:#ff6600;
            cursor: move;
            -webkit-user-select: none;
        }

        li img {
            width: 150px;
            height: 150px;
            display: block;
            border: none;
        }
    </style>
</head>
<body>
<ul>
    <li><img src="img/1.png"></li>
    <li><img src="img/2.png"></li>
    <li><img src="img/3.png"></li>
    <li><img src="img/4.png"></li>
    <li><img src="img/5.png"></li>
    <li><img src="img/6.png"></li>
    <li><img src="img/7.png"></li>
    <li><img src="img/8.png"></li>
    <li><img src="img/9.png"></li>
    <li><img src="img/10.png"></li>
    <li><img src="img/11.png"></li>
    <li><img src="img/12.png"></li>
</ul>

<script src="js/event.js"></script>
<script src="js/drag_oop.js"></script>
<script src="js/tween.js"></script>
<script>
    var oLis = document.getElementsByTagName("li");
    //第一步：把浮动布局改造成绝对定位布局，否则无法拖拽
    for (var i = oLis.length - 1; i >= 0; i--) {
        var oLi = oLis.item(i);
        oLi.style.top = (oLi.t = oLi.offsetTop) + "px";
        oLi.style.left = (oLi.l = oLi.offsetLeft) + "px";
        oLi.style.position = "absolute";//定位要后做
        oLi.style.margin = 0;
        var obj = new Drag(oLi);
        obj.border();
        obj.on("dragstart", increaseIndex);
        obj.on("dragend", goHome);
        obj.on("drag", getHited);
        obj.on("dragend",changePosition);
    }
    //点谁谁到前面
    var index = 0;
    function increaseIndex() {
        this.ele.style.zIndex = ++index;
    }
    //回到原位
    function goHome() {
        animate(this.ele, {left: this.ele.l, top: this.ele.t}, 400, 2);
    }

    //碰撞变色
    function getHited() {
        var ele = this.ele;
        this.aHited = [];
        for (var i = 0; i < oLis.length; i++) {
            var oLi = oLis.item(i);
            if (ele == oLi)continue;
            oLi.style.background="";
            if (test(ele, oLi)) {
                oLi.style.background = "#ff6600";
                this.aHited.push(oLi);//把装上的保存到数组里
            }
        }
    }
    function test(r, b) {
        if (r.offsetLeft + r.offsetWidth < b.offsetLeft || r.offsetTop + r.offsetHeight < b.offsetTop || r.offsetLeft > b.offsetLeft + b.offsetWidth || r.offsetTop > b.offsetTop + b.offsetHeight) {
            return false;//以上没有相撞
        } else {
            return true;
        }
    }

    //图片交换位置
    function changePosition(){
        var a=this.aHited;
        if(a){
            for(var i=0;i< a.length;i++){
                var oLi=a[i];
                var ele=this.ele;
                oLi.distance=Math.pow(oLi.offsetLeft-ele.offsetLeft,2)+Math.pow(oLi.offsetTop-ele.offsetTop,2);
            }
            a.sort(function(a,b){
                return a.distance- b.distance;
            });
            a[0].style.background="#000000";
            oLi=a[0];
            animate(oLi,{left:ele.l,top:ele.t},400,4);
            animate(ele,{left:oLi.l,top:oLi.t},400,3);
            var templ=ele.l;
            var tempt=ele.t;
            ele.l=oLi.l;
            ele.t=oLi.t;
            oLi.l=templ;
            oLi.t=tempt;
        }
    }
</script>
</body>
</html>

JS代码(drag_oop.js):

function EventEmitter(){
}
;
	EventEmitter.prototype.on=function(type,fn){
	if(!this[type]){
	this[type]=[];
}
var a=this[type];
	for(var i=0;
	i<a.length;
	i++){
	if(a[i]==fn)return;
}
a.push(fn);
}
;
	EventEmitter.prototype.run=function(type,e){
	var a=this[type];
	if(a){
	for(var i=0;
	i<a.length;
	i++){
	if(typeof a[i]=="function"){
	a[i].call(this,e);
}
else{
	a.splice(i,1);
	i--;
}
}
}
}
;
	EventEmitter.prototype.off=function(type,fn){
	var a=this[type];
	if(a){
	for(var i=0;
	i<a.length;
	i++){
	if(a[i]==fn){
	a[i]=null;
	break;
}
}
}
}
;
	function Drag(ele){
	this.ele=ele;
	this.x=null;
	this.y=null;
	this.mx=null;
	this.my=null;
	this.DOWN=processThis(this,this.down);
	this.MOVE=processThis(this,this.move);
	this.UP=processThis(this,this.up);
	on(ele,"mousedown",this.DOWN);
}
Drag.prototype=new EventEmitter;
	Drag.prototype.down=function(e){
	this.x=this.ele.offsetLeft;
	this.y=this.ele.offsetTop;
	this.mx=e.pageX;
	this.my=e.pageY;
	if(this.ele.setCapture){
	this.ele.setCapture();
	on(this.ele,"mousemove",this.MOVE);
	on(this.ele,"mouseup",this.UP);
}
else{
	on(document,"mousemove",this.MOVE);
	on(document,"mouseup",this.UP);
}
e.preventDefault();
	this.run("dragstart",e);
}
;
	Drag.prototype.move=function(e){
	this.ele.style.left=this.x+(e.pageX-this.mx)+"px";
	this.ele.style.top=this.y+(e.pageY-this.my)+"px";
	this.run("drag",e);
}
;
	Drag.prototype.up=function(e){
	if(this.ele.releaseCapture){
	this.ele.releaseCapture();
	off(this.ele,"mousemove",this.MOVE);
	off(this.ele,"mouseup",this.UP);
}
else{
	off(document,"mousemove",this.MOVE);
	off(document,"mouseup",this.UP);
}
this.run("dragend",e);
}
;
	Drag.prototype.addBorder=function(){
	this.ele.style.border="2px red dashed";
}
;
	Drag.prototype.removeBorder=function(){
	this.ele.style.border="";
}
;
	Drag.prototype.border=function(){
	this.on("dragstart",this.addBorder);
	this.on("dragend",this.removeBorder);
}
;

JS代码(event.js):

function on(ele,type,fn){
	if(/^self/.test(type)){
	if(!ele[type]){
	ele[type]=[];
}
var a =ele[type];
	for(var i=0;
	i<a.length;
	i++){
	if(a[i]==fn)return;
}
a.push(fn);
}
if(ele.addEventListener){
	ele.addEventListener(type,fn,false);
	return;
}
if(!ele["aEvent"+type]){
	ele["aEvent"+type]=[];
	ele.attachEvent("on"+type,function(e){
	run.call(ele,e)}
);
}
var a=ele["aEvent"+type];
	for(var i=0;
	i<a.length;
	i++){
	if(a[i]==fn)return;
	ele.attachEvent("on"+type,function(e){
	run.call(ele,e)}
);
}
a.push(fn);
	ele.attachEvent("on"+type,function(e){
	run.call(ele,e)}
);
}
function run(){
	var e=window.event;
	if(!e.target){
	e.target=e.srcElement;
	e.stopPropagation=function(){
	e.cancelBubble=true}
;
	e.preventDefault=function(){
	e.returnValue=false}
;
	e.pageX=(document.documentElement.scrollLeft||document.body.scrollLeft)+e.clientX;
	e.pageY=(document.documentElement.scrollTop||document.body.scrollTop)+e.clientY;
}
var a = this["aEvent"+e.type];
	for(var i =0;
	i<a.length;
	i++){
	if(typeof a[i] == "function"){
	a[i].call(this,e);
}
else{
	a.splice(i,1);
	i--;
}
}
}
function selfRun(selfType,e){
	var a=this[selfType];
	if(a){
	for(var i=0;
	i<a.length;
	i++){
	if(typeof a[i] == "function"){
	a[i].call(this,e);
}
}
}
}
function off(ele,type,fn){
	if(/^self/.test(type)){
	var a=ele[type];
	if(a){
	for(var i=0;
	i<a.length;
	i++){
	if(a[i]==fn){
	a[i]=null;
	break;
}
}
}
}
if(ele.removeEventListener){
	ele.removeEventListener(type,fn,false);
	return;
}
var ary=ele["aEvent"+type];
	if(ary){
	for(var i=0;
	i<ary.length;
	i++){
	if(ary[i]===fn){
	ary[i]=null;
	return;
}
}
}
}
function processThis(obj,fn){
	return function(e){
	fn.call(obj,e)}
}

附件:下载该文件资源,减少时间成本(增值服务)