ExtJS的拖拽效果示例

2024-12-16 03:00:11

代码如下:

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

js 表格拖拽效果实例代码 (IE only)

Table Test (I.E. Only) /*得到表格列*/ function getCols(srcCellIndex,obj) { obj = typeof obj === 'string' ? document.getElementById(obj) : obj; var s = ''; s += ' ' s += obj.rows[0].cells[srcCellIndex].innerHTML + ' '; for(var i = 1;i ' + obj.rows[i].cells
使用js实现的简单拖拽效果

前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/ 是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话不多说. first: html和css 复制代码代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <ti
原生js实现可拖拽效果

效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>可拖拽特效</title> <style type="text/css"> *{margin: 0;padding: 0;} .header{width:100%;height:30px;backgrou
js实现小窗口拖拽效果

本文实例为大家分享了js实现窗口拖拽的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { height: 300px; width: 300px; background-color: green; po
js实现拖拽功能

效果图:(红色方块可任意拖动) 代码如下: <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <me
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

本文实例讲述了JS实现漂亮的窗口拖拽效果.分享给大家供大家参考.具体如下: 这是一款漂亮的JS窗口拖拽效果(改变大小/最小化/最大化/还原/关闭) 特点: ① 窗口可以拖动: ② 窗口可以通过八个方向改变大小: ③ 窗口可以最小化.最大化.还原.关闭: ④ 限制窗口最小宽度/高度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win-drug-cha-close-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
javascript实现移动端上的触屏拖拽功能

本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initi
js实现拖拽效果

首先来了解一下,面向对象练习的基本规则和问题: 先写出普通的写法,然后改成面向对象写法项普通方法变形 ·尽量不要出现函数嵌套函数 ·可以有全局变量 ·把onload函数中不是赋值的语句放到单独函数中改成面向对象 ·全局变量就是属性 ·函数就是方法 ·onload中创建对象 ·改this指针问题先把拖拽效果的布局完善好: HTML结构: <div id="box"></div> csc样式: #box{position: absolute;width: 20
javascript实现PC网页里的拖拽效果

几年前,我参与设计开发一个房产网的项目,我负责前端工作,由于项目经理要求比较高,参考了很多房产类网站比较优秀的功能,想把别人比较优秀的设计和想法集合到一起,那时的设计稿和功能实现,简直就是改了又改,今天做好的一个很好的效果,可能第二天就要推到重来,算了,不说这些了,还是说说我们今天要讲解的案例吧,不知道大家访问过搜房网没有(完全没有做广告之嫌,搜房网,可以给点广告费不),其中有一个功能产品经理特别喜欢,那,就是下面的这个: 这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖
js最简单的拖拽效果实现代码

其实对于弹出层而言,拖拽最初的目的很单纯,就是为了通过拉开层,使被弹出层挡住的内容可见,(当然,后来关于拖拽的功能不断被优化,使得拖拽的应用有了别的意义,最典型的如igoogle的自定义首页,通过拖放的形式满足用户自定义想要的内容模块顺序和位置). 本文讨论的重点不是iGoogle的拖放效果,那属于进阶篇,本文是拖拽的"第一阶",如题,实现最简单的拖拽. 这里的"最简单"即不考虑多个拖拽层的堆叠顺序,不考虑拖拽范围限制,不考虑类似iGoogle的"drag

ExtJS的拖拽效果示例

相关推荐

随机推荐