当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 使用yui3实现最简单拖动

Javascript
JavaScript 解析Json字符串的性能比较分析代码
js 日期字符串截取分割成单个具体的日期(2009-12-30 13:28:29)
javascript 倒计时代码
javascript 语法基础 想学习js的朋友可以看看
javascript获取元素文本内容的通用函数
javascript 动态设置已知select的option的value值的代码
jquery 简单的图片展示效果
js textarea自动增高并隐藏滚动条
Javascript 中介者模式实例
textbox 在光标位置插入字符功能的js实现(兼容ie,firefox)
jQuery Attributes(属性)的使用(二、类篇)
Javascript document.referrer判断访客来源网址
[原创]javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox]
javascript获得光标所在的文本框(text/textarea)中的位置
event.srcElement 用法笔记e.target
javascript 导出数据到Excel(处理table中的元素)
javascript DOM操作之动态删除TABLE多行
Javascript在IE或Firefox下获取鼠标位置的代码
Javascript 多浏览器兼容性问题及解决方案
让div层随鼠标移动的实现代码 ie ff

Javascript 中的 使用yui3实现最简单拖动


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 350 ::
收藏到网摘: n/a

如果你有用javascript写过拖动的话,应该知道是有多么麻烦的,不过yui3为大家提供了一个非常方便的方法实现拖动,今天我们先来看看使用yui3实现最简单拖动,首先贴出代码(如果你感兴趣,可以点击这里查看效果):上面我有相应的解释,这些解释都是我的个人理解,可能不完全对,但是这样就可以实现拖动了,如果你有正确的解释,请与我联系,谢谢!或者请留言。

//引用yui-min.js,将其放到head之中
<script src=“http://yui.yahooapis.com/3.0.0pr2/build/yui/yui-min.js” type=“text/javascript”></script>
//body中的内容
//结构
<div id=“demo”><h2>x</h2>Drag Me</div>
//js代码
<script type=“text/javascript”>
YUI().use(‘dd’,function(Y) {
var node = Y.get(‘#demo’);//使用Y.get获取id为demo的对象,与原生js中的document.getElementById()相同,功能会更强一些。
node.plug(Y.plugin.Drag);//我的理解是确定被拖动的对象
node.dd.addHandle(‘h2′);//用于控制拖动的地方,这里就是当鼠标移到h2上的时候就可以拖动
node.dd.addHandle(”);//这样写的话,就是在demo的任何位置都可拖动
});
</script>