天天看點
傳回

jQuery實作可移動(draggable)和可縮放(sizable)網頁元素

找了很多插件，發現還是自己寫的比較熟悉，還可以輸出各種參數。

一、移動和縮放需要的事件

jQuery提供了很多事件，移動和縮放需要的隻要三個：movedown、mousemove、mouseup，滑鼠按下的時候表示開始可移動和縮放；滑鼠移動時，元素随之移動或縮放；滑鼠松開時，移動或縮放結束。

drag.mousedown(function(){//在需要移動或縮放的元素上綁定滑鼠按下事件

$(this).addClass("down");

myEvent = event || window.event;

fx = myEvent.clientX;

fy = myEvent.clientY;

selfx=$(this).offset().left;

selfy=$(this).offset().top;

wx=fx-selfx;//得到滑鼠位置和元素目前位置之間的差

wy=fy-selfy;

$(document).bind('mousemove',function(){//把mousemove綁定到document對象上，防止滑鼠移動太快

myEvent = event || window.event; 

topy=myEvent.clientY-wy;

topx=myEvent.clientX-wx;

drag.css({ "top":topy, "left":topx});//設定元素位置，需要絕對定位

})

})

drag.mouseup(function(){

$(document).unbind("mousemove");

$(this).removeClass("down")

})

drag.hover(function(){$(this).addClass("hv")},function(){$(this).removeClass("hv")})//滑鼠經過時變為可移動光标

二、CSS設定

可移動或可縮放元素需要絕對定位。還可以設定滑鼠經過和按下時的變化。

<div class="drag"></div>

.drag{position:absolute;}

.drag.hv{cursor:move}

.drag.down{background:gray;}

三、縮放設定

在可移動元素中右下角添加一個元素，标志可以縮放操作區域。當滑鼠位置在縮放操作區域時，不移動，而是改變元素width和height

<div class="drag"><span></span></div>

.drag span{position:absolute; right:0; bottom:0; cursor:se-resize; display:none;}

.drag.hv span{display:block;}

四、下面是完整源代碼： 

<!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-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery[無需插件]可移動(draggable)和可縮放(sizable)網頁元素</title>
<script src="jquery.js" type="text/javascript"></script>
<style>
body,dl,dd,ul,li,h3{ margin:0; padding:0;}
body{ background:#f0f0f0; font:12px/150% verdana;}
#hd{ height:100px; background:gray;}
#ft{ height:30px;}
#mn{ width:1000px; margin:auto;}
.draggable{ width:1000px; height:1480px;}
.drag{ line-height:200%; padding:0 10px;position:absolute; width:auto;/*white-space:nowrap;*/max-width:1000px;}
.drag b{border-right:1px solid red;border-bottom:1px solid red; width:5px; height:5px; line-height:5px; position:absolute; right:0; bottom:0; cursor:se-resize; display:none;}
.drag.hv{ cursor:move; background:#ffc;/*border:1px dashed #999;*/}
.drag.hv b{ display:block;}
.drag.down{ background:#ccc;}

#d1{ top:319px;left:371px;width:177px;height:38px;}
#d2{ top:549px;left:402px;}
#d3{ top:596px;left:403px;}
#d4{ top:639px;left:365px;}
#d5{ top:638px;left:525px;width:92px;height:25px;}
#d6{ top:687px;left:524px;}
#d7{ top:833px;left:275px;width:664px;height:121px;}
</style>
</head>
<body>
<div id="hd"></div>
<div id="mn">
<dl class="draggable">
<dd class="drag" id="d1">
文字區域
<b></b> </dd>
<dd class="drag" id="d2">
文字區域
<b></b> </dd>
<dd class="drag" id="d3">
文字區域
<b></b> </dd>
<dd class="drag" id="d4">
2011-5-5 
<b></b> </dd>
<dd class="drag" id="d5">
文字區域
<b></b> </dd>
<dd class="drag" id="d6">
文字區域
<b></b> </dd>
<dd class="drag" id="d7">
<p>6月15日，生乳國家标準頒布實施一年後，素有“中國奶業第一炮筒”之稱的廣州市奶業協會理事長王丁棉在業内會議上炮轟該标準為“全球最差，是全球乳業的恥辱”，并稱“中國生乳标準被個别生産的大企業綁架”。</p>
<p>這場業内讨論，再一次引發公衆對中國乳制品行業的信任危機。</p>
<p>中國乳品是否真的過低？依據在哪裡？修改前的标準是否真的難以達到？昨天，本報再次就此事對話王丁棉。</p>
<p><strong>【很少的蛋白質，那麼高的細菌，那還不如喝開水。消費者錢花了，得不到應有的營養回報，還損害健康】</strong></p>
<b></b> </dd>
</dl>
</div>
<div id="ft"></div>

<script>
document.onselectstart=function(){return false};//無法選擇内容
$(document).ready(function(){

//拖動
var drag=$(".drag");

drag.hover(function(){$(this).addClass("hv")},function(){$(this).removeClass("hv")})
drag.mousedown(function(myEvent){
	$(this).addClass("down");
	myEvent = event || window.event;
	fx = myEvent.clientX;
	fy = myEvent.clientY;
	selfx=$(this).offset().left;
	selfy=$(this).offset().top;
	wx=fx-selfx;//得到滑鼠位置和元素目前位置之間的差，友善下面mousemove事件裡使用clientX(Y)換算對應的top(left)值。
	wy=fy-selfy;
	drag=$(this);
	oldScrollTop  = $(document).scrollTop();

	 
	var inZoomArea = (wx>drag.width()+5 && wy+oldScrollTop>drag.height()-5);
	$(this).text(fy+":"+selfy+":"+oldScrollTop);
	
	
	if(inZoomArea)
	{//縮放
		$(document).bind('mousemove',function(myEvent){
		myEvent = event || window.event; 
		topy=myEvent.clientY+$(document).scrollTop()-selfy;
		topx=myEvent.clientX-selfx;
		drag.css({ "height":topy+3, "width":topx-17});
		})
	}else{//移動
		$(document).bind('mousemove',function(myEvent){
		myEvent = event || window.event;
		topy=myEvent.clientY-wy;
		topx=myEvent.clientX-wx;
		
		var newScrollTop = $(document).scrollTop();
		var fixTop = newScrollTop - oldScrollTop;	
		if(fixTop!=0) topy+=fixTop;//修複當拖動到産生滾動條時drag與滑鼠位置錯位的bug	
		
		drag.css({ "top":topy, "left":topx});
		})
	}
})

drag.mouseup(function(){
$(document).unbind("mousemove");
$(this).removeClass("down");
})

})
</script>
</body>
</html>
前端開發 jquery function class xhtml border html
上一篇: Jquery實作可拖動進度條
下一篇: input 字母大小寫轉換

繼續閱讀