ExtJS的拖拽效果示例
更新时间：2013年12月09日 17:17:57 作者：
拖拽效果想必大家都有见到过吧，实现方式大同小异，在接下来的文章中为大家详细介绍下使用ExtJS是如何做到的
复制代码 代码如下:
<html>
<head>
<title>hello</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="Stylesheet" type="text/css" href="http:10.19.1.55/lib/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="http:10.19.1.55/lib/extjs/bootstrap.js"></script>
<script type="text/javascript" src="http:10.19.1.55/lib/extjs/locale/ext-lang-zh_CN.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
Ext.onReady(function(){
var drags=document.getElementsByTagName('li');
for(var i=0;i<drags.length;i++)
{
Ext.dd.Registry.register(drags[i]);
}
new Ext.dd.DragZone('today');
new Ext.dd.DragZone('tmrw');
function drop(dropNodeData,source,event,dragNodeData)
{
var dragged=source.dragData.ddel;
var sourceContainer=source.el.dom;
var desContainer=this.getEl();
sourceContainer.removeChild(dragged);
desContainer.appendChild(dragged);
return true;
}
var cfg={onNodeDrop:drop};
new Ext.dd.DropZone('today',cfg);
new Ext.dd.DropZone('tmrw',cfg);
})
</script>
</head>
<body>
<h1>Today</h1>
<ul id="today">
<li>shopping</li>
<li>haircut</li>
</ul>
<h1>Tomorrow</h1>
<ul id="tmrw">
<li>123</li>
<li>456</li>
</ul>
</body>
</html>
相关文章
extjs grid设置某列背景颜色和字体颜色的方法，需要的朋友可以参考下。2010-09-09
Extjs学习笔记之一 初识Extjs之MessageBox
去官网下载好extjs的压缩包，解压缩之后得到如下目录结构。2010-01-01
今天需要在grid中嵌入combobox，在网上找了好久也没有找到一个正确可行的方法，可能是版本问题（我版本是extjs 3.0），没有继续研究其原因，自己查找资料，终于实现功能。现在分享一下代码。2011-01-01
ExtJS下书写动态生成的xml,只能有IE可以运行，为了兼容性，必须考虑火狐的用户，所以，这个程序为了：火狐用户的兼容性2013-04-04
异步调用不用做过多说明，ext的api中支持的很多。2009-09-09
ExtJS的FieldSet的column列布局，需要的朋友可以参考下。2009-11-11
ExtJS下grid的一些属性说明2009-12-12
所谓布局就是指容器组件中子元素的分布、排列组合方式。Ext的所有容器组件都支持而局操作，每一个容器都会有一个对应的布局，布局负责管理容器组件中子元素的排列、组合及渲染方式等。2009-04-04
下面我们写一个最简单的ExtJS应用，在hello.html文件中输入下面的代码2009-04-04
extjs实现选择多表自定义查询功能 前台部分(ext源码)
extjs实现选择多表自定义查询功能 前台部分(ext源码) ，需要的朋友可以参考下。2011-12-12
最新评论