Extjs 拖拽实例

JavaSky66

浏览: 38699 次
性别:
来自: 北京

最近访客更多访客>>

auhenzh

lzn-boy

trh505

lxhrainy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ExtJS

EXT HTML Blog

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
   <title>Extjs 拖拽实例</title>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript" src="/test/extjs/adapter/ext/ext-base.js"></script>
   <script type="text/javascript" src="/test/extjs/ext-all.js"></script>
   <script type="text/javascript" src="/test/extjs/ext-all-debug.js"></script>
   <link rel="stylesheet" type="text/css" href="/test/extjs/resources/css/ext-all.css">
   <style type="text/css">
     body{
        font-size:12px; margin:10px;
     }
     .item{
       border:1px #000 solid;
       margin-right:10px;
       width:60px;
       height:140px;
       text-align:center;
       padding-top:10px;
       color:white;
       float:left;
       cursor:pointer;
     }
     .block{
       border:1px red solid;
       height:380px;
       margin-top:50px;
       padding:20px 0 0 20px;
       clear:both;
     }
   </style>
   <script type="text/javascript">
      Ext.onReady(function(){
         var proxy = new Ext.dd.DDProxy("proxy");
         var proxy_red = new Ext.dd.DragSource('proxy_red',{group:'dd'});
         var proxy_green = new Ext.dd.DragSource('proxy_green',{group:'dd'});
         var proxy_yellow = new Ext.dd.DragSource('proxy_yellow',{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];
            destEl.dom.style.backgroundColor = sColor;
         };
         proxy_green.afterDragDrop = proxy_red.afterDragDrop;
         proxy_yellow.afterDragDrop = proxy_red.afterDragDrop;

         //建立拖动目标区
         var target = new Ext.dd.DDTarget('target','dd');

      });
    </script>
</head>
<body>
<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_yellow" class="item" style="background:yellow">Yellow</div>
<div id="proxy" class="item" style="background:pink;">我可以随便拖</div>
   </div>
<div id="target" class="block">把上面有颜色的色块拖到我这里试试</div>

</body>
</html>

本文转自 http://hi.baidu.com/hanlicun/blog/item/7d429c13f51bae2fdc540134.html

分享到：

crystal report的查询公式与oracle 的sql ... | 可编辑表格EditGridPanel

2011-02-09 14:01
浏览 4768
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论