ExtJS的拖拽效果示例
ExtJS的拖拽效果示例
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:helloExt.onReady(function(){vardrags=document.getElementsByTa...

复制代码 代码如下:

<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>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类