图片拖动组件 / 憋错料

图片拖动组件

图片拖动组件 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 onloadMoveImg(imgArray);

	imgPanel.init();

}

function onloadMoveImg(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 onLoadProdHtml(){

		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="closeyes.gif"></div><img src="‘+imgArray[i]+‘" class="imgcss"></div><div class="close" id ="delImg_‘+i+‘" style="left:100px"><img style="cursor:pointer;" src="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="closeyes.gif"></div><img src="‘+imgArray[i]+‘" class="imgcss"></div><div class="close" id ="delImg_‘+i+‘" style="left:220px"><img style="cursor:pointer;" src="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="closeyes.gif"></div><img src="‘+imgArray[i]+‘" class="imgcss"></div><div class="close" id ="delImg_‘+i+‘" style="left:340px"><img style="cursor:pointer;" src="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="closeyes.gif"></div><img src="‘+imgArray[i]+‘" class="imgcss"></div><div class="close" id ="delImg_‘+i+‘" style="left:460px"><img style="cursor:pointer;" src="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="closeyes.gif"></div><img src="‘+imgArray[i]+‘" class="imgcss"></div><div class="close" id ="delImg_‘+i+‘" style="left:100px;top:120px"><img style="cursor:pointer;" src="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="closeyes.gif"></div><img src="‘+imgArray[i]+‘" class="imgcss"></div><div class="close" id ="delImg_‘+i+‘" style="left:220px;top:120px"><img style="cursor:pointer;" src="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="closeyes.gif"></div><img src="‘+imgArray[i]+‘" class="imgcss"></div><div class="close" id ="delImg_‘+i+‘" style="left:340px;top:120px"><img style="cursor:pointer;" src="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="closeyes.gif"></div><img src="‘+imgArray[i]+‘" class="imgcss"></div><div class="close" id ="delImg_‘+i+‘" style="left:460px;top:120px"><img style="cursor:pointer;" src="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 onloadMoveImg(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>

图片拖动组件,布布扣,bubuko.com

时间： 2024-12-23 07:48:08

图片拖动组件的相关文章

【咸鱼教程】EUI多图片滑动组件ScrollView

先看看实际效果实现原理1. ScrollView继承eui.Scroll2. 监听eui.Sroll的CHANGE_START和CHANGE_END事件, 根据鼠标滑动距离,来改变视口viewport.scrollH,达到图片滑动的效果. 使用方法1. 拖动组件到exml上在自定义组件里,拖动ScrollView组件到exml上,将要显示的图片拖动到Scroll的Group下.ScrollView高宽一定要和图片高宽一致. 2. 设置Group的布局和水平间隔比如如果是横着的图片

6.安装和配置OpenStack图片服务组件

安装和配置图片服务组件这里是安装在控制器上安装和配置图片服务组件 yum install –y openstack-glance python-glanceclient 编辑/etc/glance/glance-api.conf mv /etc/glance/glance-api.conf /etc/glance/glance-api.conf_bak vim /etc/glance/glance-api.conf [database] connection = mysql://glance

html实现页面禁止右键禁止复制禁止图片拖动禁止复制和剪切

众所周知,一般的屏蔽的方法是用JS来编写的脚本,但是也可以直接通过修改网页属性的方法来屏蔽右键禁止复制. 禁止右键 oncontextmenu="return false" 禁止复制和剪切: oncopy="return false;" oncut="return false;" 禁止复制 onselectstart="return false" 禁止图片拖动 ondragstart="return false&q

图片移动组件

支持图片移动,即左右上下移动,DEMO <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-

android之实现SeekBar拖动组件

android之实现SeekBar拖动组件: 布局:layout/activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" androi

从零开始学android<ImageSwitcher图片切换组件.二十六.>

ImageSwitcher组件的主要功能是完成图片的切换显示,例如用户在进行图片浏览的时候,可以通过按钮点击一张张的切换显示的图片,而且使用ImageSwitcher组件在每次切换的时候也可以为其增加一些动画的效果,此类定义如下: java.lang.Object ? android.view.View ? android.view.ViewGroup ? android.widget.FrameLayout ? android.widget.ViewAnimator ? android.wid

第一百九十三节，jQuery EasyUI，Draggable(拖动)组件

Draggable(拖动)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其他组件. 一．加载方式 //class 加载方式 <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;"> 内容部分 &l

JQuery EasyUI---Draggable( 拖动) 组件

学习要点: 1.加载方式2.属性列表3.事件列表4.方法列表本节重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其他组件. 一．加载方式 //class 加载方式这种方式看起来html代码不干净,会污染html.建议使用JS的方式去加载 <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="

javascript 实现图片拖动

javascript实现图片拖动效果并不难,主要的思路如下 1:给图片绑定监听鼠标按下对象,设置拖动属性为true 2:鼠标抬起:拖动属性为false 鼠标移动:改变坐标即可,新坐标=图片原始坐标+鼠标移动后坐标-鼠标移动前坐标注意事项要给图片的位置属性设为fixed或者absolute,并且要图片复制初始的left和top属性代码如下 <!DOCTYPE html> <html> <head> <meta content="text/html;c