当前位置:首页>> 网站建设知识>> 网站建设知识

全文搜索

精华导读

·网站知识:虚拟中的真实:虚拟主机应用初探
·如何做好互联网的策划
·自动分词与中文搜索引擎
·网页文章的优化
·网站的一些基础小知识
·把网站变成卖场
·细说选择.cn域名的七大理由
·网站性感域名十大原则
·大型商务网站的SEO优化误区
·导致搜索引擎收录困难的5种原因
·网站建设中meta标签之详解
·网页制作中Web网页安全色谱
·网页设计中HTML常范的五个错误
·如何建立网站地图(site map)
·网站建设时如何选购虚拟主机?
·中国国家顶级域名和国际域名有什么区别?
·企业建设网站域名可以使用哪些字?
·建设网站时企业如何准备建网站资料?
·DIV+CSS建立标准WEB网页的好处

最新发表

·ASP实现文件直接下载
·关于CSS hack的思考
·纯CSS Tooltips
·CSS中float引起层飘出上级层的解决方案,清除浮动的好方法
·用CSS样式实现显示隐藏层方案
·用CSS按比例缩放图片
·绝对路径与相对路径祥解
·让文本框textarea自动适应内容的高度
·纯CSS Tooltips
·网页制作学习:虚线表格的制作方法
·超强超靓网页日历代码,网页特效
·极品万年历网页特效
·影响SEO的页面制作细节
·SEO实战:逃离Google补充材料的五个技巧
·如何提高网站的Google页面等级(PR值)
·论坛宣传网站的十二大绝招
·搜索引擎注册九大秘法
·10种在SEO之外获得网站流量的方式
·巧妙应对内容复制---Google官方博文

使用extjs将div浮动并实现鼠标拖放

文章来源:网站建设知识 文章编辑:admin 添加时间:2009-3-3 13:23:30

extjs使div实现鼠标拖放效果很简单,一句话就可以搞定:
var proxy = new Ext.dd.DDProxy("search_div"); 
search_div为我网页里div的id号。
这样,id为search_div的div元素就可以实现用鼠标拖动的效果了。
 
以下是摘自网上一拖放div 效果代表:
 

[www.cn-web.com]
< body > 
< script type ="text/javascript" > 
    Ext.onReady( function () {
        var proxy = new Ext.dd.DDProxy( " proxy " ); // 这一句就可以建立一个随便拖的东东,神奇吧 
        // (ExtJs的拖动组件分二大类,DDProxy就是要拖动的东西,而DDTarget就是拖动后可以扔进去的目标容器区) 



        // 以下建立了三个拖动源DropSource(继承自DDProxy可以查看官方文档),并标明gruop为dd 
        var proxy_red = new Ext.dd.DragSource( ' proxy_red ' , { group: ' dd ' });
        var proxy_green = new Ext.dd.DragSource( ' proxy_green ' , { group: ' dd ' });
        var proxy_black = new Ext.dd.DragSource( ' proxy_black ' , { group: ' dd ' });

        // 拖动完成的事件 
        proxy_red.afterDragDrop = function (target, e, id) {
            var destEl = Ext.get(id);
            var srcEl = Ext.get( this .getEl());
            var sColor = srcEl.dom.id.split( ' _ ' )[ 1 ]; // 得取拖动源id的后面一部分,即proxy_red后面的red 
            destEl.dom.style.backgroundColor = sColor; // 设置目标id的背景色 
        };

        proxy_green.afterDragDrop = proxy_red.afterDragDrop; // 为其它拖动源赋值同样的事件处理函数 
        proxy_black.afterDragDrop = proxy_red.afterDragDrop;

        var target = new Ext.dd.DDTarget( ' target ' , ' dd ' ); // 建立拖动目标区(这里的dd与上面拖动源的group:dd相同 
        // 只有相同group的DDProxy/DragSource才会接受) 
    });
</ script > 
< div > 
    < div id ="proxy_red" class ="item" style ="background:red" > Red </ div >        
    < div id ="proxy_green" class ="item" style ="background:green" > Green </ div >      
    < div id ="proxy_black" class ="item" style ="background:black" > Black </ div >    
    < div id ="proxy" class ="item" style ="color:Black" > 我可以 < br /> 随便拖 </ div > 
</ div > 
< div id ="target" class ="block" > 把上面有颜色的色块拖到我这里试试 </ div > 
</ body > 

[ ]

首页 评论 打印 刷新 返回顶部 关闭
【相关文章】  【相关评论】
关于CSS hack的思考
纯CSS Tooltips
CSS中float引起层飘出上级层的解决方案,清除浮动的好方法
用CSS样式实现显示隐藏层方案
用CSS按比例缩放图片