第 7 章 低鸣吧!拖拽就像呼吸一样容易
2008-01-07 19:24
225 查看
7.1. 如此拖拽,简直就像与生俱来的本能一样。
你可以拖拽grid里的行,让它们按你的方式去排列。
你可以拖拽tree里的节点,把节点从一个枝干拖向另一个枝干。
grid和tree之间,也可以拖动。
layout的split也是一种拖动,改变布局的大小。
resize也算是拖动,改变大小。
7.2. 第一!乱拖。
一直认为拖动很复杂,可实际上只需要一条语句就可以了。
new Ext.dd.DDProxy('block');
然后看看html里的部分
<div id="block" style="background: red;"> </div>
如果不做任何标记,我们根本什么都看不到,所以我给加上了红色背景颜色。现在你可以乱拖了。
截图里的红条条可以随便拖,实际看例子吧。lingo-sample/1.1.1/07-01.html,2.0里用法一样,lingo-sample/2.0/07-01.html。
7.3. 第二!代理proxy和目标target
实际上我们刚才看到了DDProxy可以随便拖,另外一个DDTarget是不能拖动的,这东西是用来放DDProxy的一个区域。看一看继承体系图可能有助于我们的理解。
简单来说,左边都是可以随你的鼠标拖动的,拖动起来以后,直接把他们扔到右边那些定义好的区域就好了。proxy是可拖动对象,target是拖动的目的地。
在知道了是与非之后,我们要验证一下自己的理念了。
proxy是我们要拖来拖去的东西。
var proxy = new Ext.dd.DragSource('proxy', {group:'dd'});
target告诉用户,他应该把上边的proxy放到哪里
var target = new Ext.dd.DDTarget('target', 'dd');
注意到两者之中相同的dd了吗?这是个分组标志,咱们通过这个限制用户不会像第一节那样,把proxy乱扔到任何地方。只有相同组名的目的地才能接收它,好比你只能把超市货架上的商品放进篮子,而不能满地乱扔一样。
不过这也仅仅是拖拽而已,没有任何效果不是很不爽吗?让我们加入一些小技巧吧,可以让拖拽显得更神奇一些。
proxy.afterDragDrop = function(target, e, id) { var destEl = Ext.get(id); var srcEl = Ext.get(proxy.getEl()); srcEl.insertBefore(destEl); };
这个函数是说,在dragdrop之后,会执行这个函数,然后通过id获得target,根据proxy.getEl()获得proxy,然后把proxy添加到target的前头,看起来是放在里边了。
好,脚本都组织好了,打开页面看看效果吧。
当然,为了让画面花花绿绿的,咱们加了不少css样式,稍微给你们看一下吧,省得那些不愿意交钱的人说咱们的截图是用photoshop画的。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>dd</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<style type="text/css">
HR {
clear: both;
visibility: hidden
}
.block {
border: 1px red solid;
margin: 10px;
min-height: 80px;
}
.item {
border: 1px green solid;
background: green;
float: left;
margin:10px;
width: 50px;
min-height: 50px;
text-align: center;
}
</style>
<script type="text/javascript">
Ext.onReady(function(){
var proxy = new Ext.dd.DragSource('proxy', {group:'dd'});
proxy.afterDragDrop = function(target, e, id) { var destEl = Ext.get(id); var srcEl = Ext.get(proxy.getEl()); srcEl.insertBefore(destEl); };
var target = new Ext.dd.DDTarget('target', 'dd');
});
</script>
</head>
<body>
<script type="text/javascript" src="../examples.js"></script>
<div id="proxy" class="item">item</div>
<hr />
<div id="target" class="block">
<hr />
</div>
</body>
</html>
好了,其实你也可以在lingo-sample/1.1.1/07-02.html看到咱们的例子。很高兴的是,lingo-sample/2.0/07-02.html跟它完全一样。
7.4. 再拖!再拖拖。
还有JsonView啦,DataView什么的,都可以拖,但渲染的时候更见方便,这些等于是Template和Store的一种结合体制。
未完待续
相关文章推荐
- 第 7 章 低鸣吧!拖拽就像呼吸一样容易
- 你的话信用度太低,说出来就像喝水一样容易
- 让使用MSN就像访问网页一样容易!
- 当我们选择一种人生的时候,其实就像选择一张去往目的地的车票一样容易
- 让 Chrome 像 app 一样下拉拖拽刷新页面
- TEdit 控件的提示,就像 IE7 的地址输入栏一样
- 腾讯视频嵌入手机端网站demo - 就像微信文章中一样一样的
- 在Unity3D中如何让摄像机进行平滑的透视(perspective)和正视(orthographic)角度变换(就像编辑器中点击Gizmos一样的效果)
- 我害怕死亡,就像害怕坐飞机一样.
- php怎样实现转向页面?就像asp里面的response.redirect一样
- 计算机语言妙语录 软件就像性一样
- 计算机语言妙语录 软件就像性一样
- 从来没做过web,就像从来没写过文章一样
- 超强模仿:让XP从“开始”就像Vista一样
- 如何让用户点击返回的时候让网页过期呢,就像很多在线银行的一样
- 女人就像花一样,花朵总是需要被保护起来,如果你把花放到水沟里,它就会被损坏;如果你把花放到寺庙中,她就会被尊重;
- Vue通过操作Dom元素 实现 拖拽文件到网页进行文件上传【JS/JQ 原理也是一样的】
- 新功能:可以创建普通表格啦,就像Excel一样。也可以发布Web表单
- 你曾说过,走过的幸福,就像绽放的花儿一样,惊艳的总是一瞬,而剩下的痕迹,都是枯萎留下的线索,是停留在记忆中所有美好的见证。
- MVC为Html对象建立一个扩展方法,使用自己的控件就像使用TextBox一样方便