Ext.dd.DD模拟桌面图标自动对齐
本文由发表于7年前 | ExtJS | 暂无评论 |  被围观 6,381 views+

如果要模拟windows的拖动图标自动对齐功能,在ExtJS实现起来非常简单。这里我们使用Ext.dd.DD类实现,通过Ext.dd.DD类创建的拖动对象可以随着鼠标移动而移动,为了实现自动对齐的功能,可以使用Ext.dd.DD的
setXConstraint( int iLeft, int iRight, int iTickSize )和
setYConstraint( int iUp, int iDown, int iTickSize )方法,详细见下面示例:

Ext.dd.DD自动对齐
<html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Ext.dd.DD模拟桌面图标自动对齐功能</title>
<link rel="stylesheet" type="text/css"
	href="../script/resources/css/ext-all.css" />
<script type="text/javascript" src="../script/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../script/ext-all.js"></script>
<script type="text/javascript" src="../script/ext-all.js"></script>
<style type="text/css">
body {
	background:url(../images/gridbackground.png);
}
#icon-dd1 {
	width: 100px;
	height:100px;
}
#icon-dd2 {
	width: 100px;
	height:100px;
}
#icon-dd3 {
	width: 100px;
	height:100px;
}
</style>
<script type="text/javascript">


Ext.onReady(function(){
    dd1 = new Ext.dd.DD("icon-dd1");
    dd1.setXConstraint(300, 300, 100);
    dd1.setYConstraint(0, 300, 100);
    dd2 = new Ext.dd.DD("icon-dd2");
    dd2.setXConstraint(300, 300, 100);
    dd2.setYConstraint(300, 300, 100);
    dd3 = new Ext.dd.DD("icon-dd3");
    dd3.setXConstraint(300, 300, 100);
    dd3.setYConstraint(300, 300, 100);
});

</script>

</head>

<body >

<img id="icon-dd1" src="..\images\01.png";></img>

<img id="icon-dd2" src="..\images\02.png"></img>

<img id="icon-dd3" src="..\images\03.png"></img>

</body>

</html>

运行效果如下图:

Ext.dd.DD模拟桌面图标自动对齐

Ext.dd.DD模拟桌面图标自动对齐

除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/ext-dd-dd-analog-desktop-icons-automatically-aligned.html
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2011 4/13
文章评论
    没有评论
给我留言

有人回复时邮件通知我
ExtJS的相关文章
随机文章 本月热门 热评
1 使用Maven管理Jar包和查看第三方Jar包源代码 2014/5/17
2 据说这套试题对于软考很有帮助,大家可以看看 2011/4/26
3 设计模式笔记 – Strategy 策略模式 (Design Pattern) 2011/10/17
4 ExtJS中表格控件的使用,属性设置和数据的获取 2011/7/24
5 Android工程目录结构的说明 创建工程 AndroidManifest.xml 2011/7/12
6 Java对象内存计算的几种方法 2014/6/8
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.