首页 > 代码库 > 图片拖动组件
图片拖动组件
图片拖动组件 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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。