ExtJS的拖拽效果示例
更新時間:2013年12月09日 17:17:57 作者:
拖拽效果想必大家都有見到過吧,實現(xiàn)方式大同小異,在接下來的文章中為大家詳細介紹下使用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添加一個圖片狀態(tài)或者按鈕的方法
extjs的grid中我們經(jīng)常需要添加一個圖片狀態(tài)或者按鈕,下面將自己用過的一些方法與大家分享下2014-04-04ext combobox動態(tài)加載數(shù)據(jù)庫數(shù)據(jù)(附前后臺)
這篇文章主要介紹了ext combobox動態(tài)加載數(shù)據(jù)庫數(shù)據(jù)并附前后臺實現(xiàn),需要的朋友可以參考下2014-06-06Extjs EditorGridPanel中ComboBox列的顯示問題
EditorGridPanel中嵌入ComboBox通常不會正常顯示ComboBox的store中本想顯示字段,而是顯示的EditorGridPanel中 store的dataindex指定的字段內容。2011-07-07解決ExtJS在chrome或火狐中正常顯示在ie中不顯示的瀏覽器兼容問題
由于開發(fā)過程中大多用chrome來調試,很少在ie中調試(現(xiàn)在兩者都要兼顧),導致最后在ie中頁面不能正常加載,當時那個囧啊,看到ie報的錯,我都想哭,連出錯的堆棧信息都沒有(這一點,ie做的真不好),無從下手啊2013-01-01