script.icio.us 中的拖拽

shuaigg.babysky

浏览: 568492 次
性别:
来自: 济南

最近访客更多访客>>

sgqt

amu123456

ringphone

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

<!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" />
<script type="text/javascript">
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}
</script> 
<title>Sortable</title>
<script src="http://api.prototypejs.org/javascripts/pdoc/prototype.js" type="text/javascript" ></script>
<script src="http://script.aculo.us/scriptaculous.js" type="text/javascript" ></script>
</head>
<body>
<style>
</style>
<h1>1.使元素能够移动</h1>
<div id="ex1"></div>
<div id="moveDiv" style="background-color:red;width:150px;height:20px;">Dragable div</div>
<script>
String.prototype.setCodeStyle = function() {
	return this.toString().replace(/[\r\n]+/g , '<br/>').replace(/\s/g , '&nbsp;');
}
</script>
<script id="s1">
new Draggable('moveDiv');
</script>
<script>
$('ex1').update($('s1').innerHTML.setCodeStyle());
</script>
<h1>2.使用destroy取消元素的移动</h1>
<div id="ex2"></div>
<div id="moveDiv1" style="background-color:red;width:150px;height:20px;">Dragable div</div>
<input type="checkbox" id="makeitwork" checked="checked"/>使其可以拖动
<script id="s2">
var gTux;
var makeToggle = function() {
	if(gTux) {
		gTux.destroy();
		gTux = null;
		$('moveDiv1').setStyle({
			cursor : 'default'
		});
		return;
	}
	gTux = new Draggable('moveDiv1');
	$('moveDiv1').setStyle({
		cursor : 'pointer'
	});
}
$('makeitwork').observe('click' , makeToggle);
makeToggle();
</script>
<script>
$('ex2').update($('s2').innerHTML.setCodeStyle());
</script>
<h1>3.使用handle进行局部拖动</h1>
<div id="ex3"></div>
<div id="moveDiv2" style="background-color:red;width:150px;height:50px;position:relative;">
Dragable div
<div id="handle" style="position:absolute;width:20px;height:20px;background-color:yellow;top:0px;left:0px;"></div>
</div>
<script id="s3">
new Draggable('moveDiv2' , {
	handle : 'handle'
});
$('handle').setStyle({
	cursor : 'pointer'
});
</script>
<script>
$('ex3').update($('s3').innerHTML.setCodeStyle());
</script>
<h1>4.使用delay进行拖动延迟控制(指鼠标按下多长时间才能拖动)</h1>
<div id="ex4"></div>
<div id="moveDiv3" style="background-color:red;width:150px;height:50px;">
Dragable div
</div>
<script id="s4">
new Draggable('moveDiv3' , {
	delay : 500
});
</script>
<script>
$('ex4').update($('s4').innerHTML.setCodeStyle());
</script>
<h1>4.使用snap控制元素移动的步伐</h1>
<div id="ex5"></div>
<div id="moveDiv4" style="background-color:red;width:150px;height:50px;">
Dragable div(50,50)
</div>
<div id="moveDiv5" style="background-color:red;width:150px;height:50px;">
Dragable div(指定范围)
</div>
<script id="s5">
new Draggable('moveDiv4' , {
	snap : [50,50]
});
new Draggable('moveDiv5' , {
	snap : function(x,y) {
		return [
			x < 0 ? 0 : (x > 100 ? 100 : x),
			y < 0 ? 0 : (y > 100 ? 100 : y)
		];
	}
});
</script>
<script>
$('ex5').update($('s5').innerHTML.setCodeStyle());
</script>
<h1>5.onStart、onEnd控制</h1>
<div id="ex6"></div>
<div id="moveDiv6" style="background-color:red;width:150px;height:50px;">
Dragable div
</div>
<script id="s6">
new Draggable('moveDiv6' , {
	onStart : function() {
		$('moveDiv6').setStyle({
			'background-color' : 'yellow'
		});
	},
	onEnd   : function() {
		$('moveDiv6').setStyle({
			'background-color' : 'red'
		});	
	}
});
</script>
<script>
$('ex6').update($('s6').innerHTML.setCodeStyle());
</script>
<h1>6.使用revert字段恢复元素位置</h1>
<div id="ex7"></div>
<div id="outerdiv" style="position:relative;height:200px;width:200px;border:1px solid black;padding:0;margin:0;">
<div id="moveDiv7" style="background-color:red;width:150px;height:50px;">
Dragable div
</div>
</div>
<script id="s7">
new Draggable('moveDiv7' , {
	revert : function(dragEl) {
		var offset = dragEl.positionedOffset();
		var size = dragEl.getDimensions();
		return (offset.left + size.width) > 200 || (offset.top + size.height) > 200 || offset.left < 0 || offset.top < 0;
	}
});
</script>
<script>
$('ex7').update($('s7').innerHTML.setCodeStyle());
</script>

<h1>7.移动过程中源目标具有影响</h1>
<div id="ex8"></div>
<div id="moveDiv8" style="background-color:red;width:150px;height:50px;">
Dragable div
</div>
<script id="s8">
new Draggable('moveDiv8' , {
	ghosting : true
});
</script>
<script>
$('ex8').update($('s8').innerHTML.setCodeStyle());
</script>

<h1>8.拖动的过程中处理滚动</h1>
<h5>
scroll表示根据哪个容器进行滚动，可以是id也可以是element<br />
scrollSensitivity表示距离顶部或底部距离范围是多少的时候进行滚动,默认值是20<br />
scrollSpeed表示滚动的时候速度是多少，默认是15
</h5>
<div id="ex9"></div>
<div id="moveDiv9" style="background-color:red;width:150px;height:50px;">
Dragable div
</div>
<script id="s9">
new Draggable('moveDiv9' , {
	scroll : window , 
	scrollSensitivity : 50,
	scrollSpeed : 30
});
</script>
<script>
$('ex9').update($('s9').innerHTML.setCodeStyle());
</script>
<h1>9.拖拽可放置区域</h1>
<div id="ex10"></div>
<style>
.book {width : 50px;height:50px;border:1px solid black;background-color:blue;float:left;}
#cart,#trash {width : 300px;height:70px;border:1px solid black;}
.clearfix {height:55px;}
.red {background-color:red;}
</style>
<div class="clearfix">
<div class="book">书1</div>
<div class="book">书2</div>	
</div>

<div id="cart">购物车</div>
<div id="trash">回收站</div>
<script id="s10">
$$('.book').each(function(item) {
	new Draggable(item , {revert : true});
});
Droppables.add('cart' , {
	accept : 'book' , onDrop : function(item) {
		var buyItem = item.cloneNode(true);
		buyItem.style.cssText = '';
		new Draggable(buyItem , {revert : true});
		$('cart').appendChild(buyItem);
	}
});
Droppables.add('trash' , {
	containment : 'cart' , 
	hoverclass : 'red',
	onDrop : function(item) {
		item.remove();
	}
});

</script>
<script>
$('ex10').update($('s10').innerHTML.setCodeStyle());
</script>
</body>
</html>

分享到：