首页 > 代码库 > 图片拖动组件

图片拖动组件

图片拖动组件 DEMO

 

 

<html>
<HEAD>
<title>鼠标拖动图片</title>
<style type="text/css">
.dragme{position:absolute; cursor:move;width:110px;height:110px;border:#ececec 2px solid;}
.imgcss{width:110px;height:110px;}
.close{position:absolute; z-index: 999;}
.close1{position:absolute; margin-left:98px;z-index: 998;}
</style>
</HEAD>
<body style="background-color:#BFC9DA">
<div style="margin:50px auto;width:500px;height:500px">
<div style="font-size:24px;color:red;padding: 10px 170px;">图片拖动组件</div>
<div id = "prodImgHtml" style="height:110px;margin:10px;position:relative;"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var imgArray = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg"];
window.onload = function(){
	var imgPanel = new onl oadMoveImg(imgArray);
	imgPanel.init();
}
function onl oadMoveImg(img){
	var xArray = ["0px","120px","240px","360px"]
	var currentImg;//当前选中图片
	var currentPosition;//当前选中图片移动所在的位置
	var prodImgIds = []; //图片id
	var nowProdImgIds = []; //除去当前选中图片id

	var ie=document.all;
	var nn6=document.getElementById && !document.all;
	var isdrag=false;
	var x,y;
	var dobj;
	this.imgArray = img.slice(0);
	this.init = function(){onLoadProdHtml();}

	document.onmousedown=selectmouse;
	function selectmouse(e){
		var fobj = nn6 ? e.target : event.srcElement;
		var topelement = nn6 ? "HTML" : "BODY";
		while (fobj.tagName != topelement  &&  fobj.className != "dragme"){
			fobj = nn6 ? fobj.parentNode : fobj.parentElement;
		}
		if (fobj.className=="dragme"){
			isdrag = true;
			dobj = fobj;
			tx = parseInt(dobj.style.left+0);
			ty = parseInt(dobj.style.top+0);
			x = nn6 ? e.clientX : event.clientX;
			y = nn6 ? e.clientY : event.clientY;		
			doSelect(dobj);//选中移动图片时加载方法	
			document.onmousemove=movemouse;
			return false;
		  }
	}

	function movemouse(e){
		if (isdrag){			
			var moveX = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
			var moveY = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
			dobj.style.left = moveX;
			dobj.style.top  = moveY;
			doMove(moveX,moveY);			
			return false;
		}
	}

	document.onmouseup = function(){upMove();isdrag=false;}

	function onl oadProdHtml(){
		prodImgIds=[];
		for(var i=0;i<imgArray.length;i++){prodImgIds.push("prodImg_"+i);}
		var prodHtmlArray = [];
		for(var i=0;i<imgArray.length;i++){
			(i==0)&&prodHtmlArray.push(‘<div id="prodImg_‘+i+‘" class="dragme" style="left:0px;top:0px;"><div class="close1" id ="delImg1_‘+i+‘" style="display:none"><img style="cursor:pointer;" src="http://www.mamicode.com/closeyes.gif"></div><img src="http://www.mamicode.com/‘+imgArray[i]+‘" class="imgcss"></div><div class="close" id ="delImg_‘+i+‘" style="left:100px"><img style="cursor:pointer;" src="http://www.mamicode.com/closeyes.gif"></div>‘);
			(i==1)&&prodHtmlArray.push(‘<div id="prodImg_‘+i+‘" class="dragme" style="left:120px;top:0px;"><div class="close1" id ="delImg1_‘+i+‘" style="display:none"><img style="cursor:pointer;" src="http://www.mamicode.com/closeyes.gif"></div><img src="http://www.mamicode.com/‘+imgArray[i]+‘" class="imgcss"></div><div class="close" id ="delImg_‘+i+‘" style="left:220px"><img style="cursor:pointer;" src="http://www.mamicode.com/closeyes.gif"></div>‘);
			(i==2)&&prodHtmlArray.push(‘<div id="prodImg_‘+i+‘" class="dragme" style="left:240px;top:0px;"><div class="close1" id ="delImg1_‘+i+‘" style="display:none"><img style="cursor:pointer;" src="http://www.mamicode.com/closeyes.gif"></div><img src="http://www.mamicode.com/‘+imgArray[i]+‘" class="imgcss"></div><div class="close" id ="delImg_‘+i+‘" style="left:340px"><img style="cursor:pointer;" src="http://www.mamicode.com/closeyes.gif"></div>‘);
			(i==3)&&prodHtmlArray.push(‘<div id="prodImg_‘+i+‘" class="dragme" style="left:360px;top:0px;"><div class="close1" id ="delImg1_‘+i+‘" style="display:none"><img style="cursor:pointer;" src="http://www.mamicode.com/closeyes.gif"></div><img src="http://www.mamicode.com/‘+imgArray[i]+‘" class="imgcss"></div><div class="close" id ="delImg_‘+i+‘" style="left:460px"><img style="cursor:pointer;" src="http://www.mamicode.com/closeyes.gif"></div>‘);
			(i==4)&&prodHtmlArray.push(‘<div id="prodImg_‘+i+‘" class="dragme" style="left:0px;top:120px;"><div class="close1" id ="delImg1_‘+i+‘" style="display:none"><img style="cursor:pointer;" src="http://www.mamicode.com/closeyes.gif"></div><img src="http://www.mamicode.com/‘+imgArray[i]+‘" class="imgcss"></div><div class="close" id ="delImg_‘+i+‘" style="left:100px;top:120px"><img style="cursor:pointer;" src="http://www.mamicode.com/closeyes.gif"></div>‘);
			(i==5)&&prodHtmlArray.push(‘<div id="prodImg_‘+i+‘" class="dragme" style="left:120px;top:120px;"><div class="close1" id ="delImg1_‘+i+‘" style="display:none"><img style="cursor:pointer;" src="http://www.mamicode.com/closeyes.gif"></div><img src="http://www.mamicode.com/‘+imgArray[i]+‘" class="imgcss"></div><div class="close" id ="delImg_‘+i+‘" style="left:220px;top:120px"><img style="cursor:pointer;" src="http://www.mamicode.com/closeyes.gif"></div>‘);
			(i==6)&&prodHtmlArray.push(‘<div id="prodImg_‘+i+‘" class="dragme" style="left:240px;top:120px;"><div class="close1" id ="delImg1_‘+i+‘" style="display:none"><img style="cursor:pointer;" src="http://www.mamicode.com/closeyes.gif"></div><img src="http://www.mamicode.com/‘+imgArray[i]+‘" class="imgcss"></div><div class="close" id ="delImg_‘+i+‘" style="left:340px;top:120px"><img style="cursor:pointer;" src="http://www.mamicode.com/closeyes.gif"></div>‘);
			(i==7)&&prodHtmlArray.push(‘<div id="prodImg_‘+i+‘" class="dragme" style="left:360px;top:120px;"><div class="close1" id ="delImg1_‘+i+‘" style="display:none"><img style="cursor:pointer;" src="http://www.mamicode.com/closeyes.gif"></div><img src="http://www.mamicode.com/‘+imgArray[i]+‘" class="imgcss"></div><div class="close" id ="delImg_‘+i+‘" style="left:460px;top:120px"><img style="cursor:pointer;" src="http://www.mamicode.com/closeyes.gif"></div>‘);
		}
		$(‘#prodImgHtml‘).html(prodHtmlArray.join(‘‘));
		for(var i=0;i<imgArray.length;i++){bindDel(i);}
	}

	function doSelect(dobj){
		var currentImgA = dobj.id.split(‘_‘);
		currentImg = currentImgA[1];
		currentPosition = currentImg;
		nowProdImgIds = prodImgIds.slice(0);
		nowProdImgIds.splice(parseInt(currentImg),1);
		document.getElementById(dobj.id).style.zIndex=999;
		document.getElementById(dobj.id).style.border = "2px green solid";		
	}

	function doMove(moveX,moveY){
		for(var i=0;i<imgArray.length+1;i++){$(‘#delImg1_‘+i).show();}
		for(var i=0;i<imgArray.length+1;i++){$(‘#delImg_‘+i).hide();}
		if(moveX<60&&moveY<60){currentPosition=0;}
		if(moveX>60&&moveX<180&&moveY<60){currentPosition=1;}
		if(moveX>180&&moveX<300&&moveY<60){currentPosition=2;}
		if(moveX>300&&moveY<60){currentPosition=3;}
		if(moveX<60&&moveY>60){currentPosition=4;}
		if(moveX>60&&moveX<180&&moveY>60){currentPosition=5;}
		if(moveX>180&&moveX<300&&moveY>60){currentPosition=6;}
		if(moveX>300&&moveY>60){currentPosition=7;}
		if(currentPosition<4){
			var newXArray = xArray.slice(0);
			newXArray.splice(currentPosition,1);
			for(var i=0;i<nowProdImgIds.length;i++){
				if(i<3){
					document.getElementById(nowProdImgIds[i]).style.left = newXArray[i];
					document.getElementById(nowProdImgIds[i]).style.top = "0px";
				}else{
					document.getElementById(nowProdImgIds[i]).style.left = xArray[i-3];
					document.getElementById(nowProdImgIds[i]).style.top = "120px";
				}
			}
		}else{
			var newXArray = xArray.slice(0);
			newXArray.splice(currentPosition-4,1);
			for(var i=0;i<nowProdImgIds.length;i++){
				if(i<4){
					document.getElementById(nowProdImgIds[i]).style.left = xArray[i];
					document.getElementById(nowProdImgIds[i]).style.top = "0px";
				}else{
					document.getElementById(nowProdImgIds[i]).style.left = newXArray[i-4];
					document.getElementById(nowProdImgIds[i]).style.top = "120px";	
				}
			}
		}

	}

	function upMove(){
		if(currentImg!=undefined){
			changeArray();
			var imgPanel = new onl oadMoveImg(imgArray);
			imgPanel.init();}
	}

	function changeArray(){
		var newImgArray = []; 
		var num=parseInt(currentImg);
		var moveImg = imgArray[num];
		imgArray.splice(num,1);
		for(var i = 0;i<imgArray.length;i++){
			if(i==currentPosition){newImgArray.push(moveImg);}		
			newImgArray.push(imgArray[i]);
		}
		if(currentPosition>(imgArray.length-1)){newImgArray.push(moveImg);}
		imgArray = newImgArray.slice(0);
	}

	function bindDel(i){
		$(‘#delImg_‘+i).click(function(){			
			imgArray.splice(i,1);			
			onLoadProdHtml();
			nowProdImgIds = prodImgIds.slice(0);
		})
	}

}



</script>

</body>
</html>