用 Jquery 的UI DRAG组件实现拖动功能
2008-10-01 22:39
471 查看
'最近要实现一下facebook中的photo tag功能,并对其进行扩展,在实现拖动功能时采用了$.event.special.drag 发现在实现被拖动的层不能超出固定的大小很是麻烦,不过实现了,趁放假考虑一下其它的方法,发现mootools框架中的拖动可以很容易的实现,不太相信jquery实现了,只是怀疑自己没有找到而已,后来想到了UI组件,在进行一番的文档查看后发现了ui.droppable.js这个文件。
经过研究写了一个小的DEMO,哈。假期后准备再改造一下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script src="./jquery-1.2.6.js"></script>
<script src="./ui/ui.core.js"></script>
<script src="./ui/ui.draggable.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(function() {
$('#inter').draggable({
containment: $('#outer')
});
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<div id='outer' style="width: 500px;height: 500px;background:#EEE">
<div id='inter' style="width: 100px;height: 100px;background:#ccc"></div>
</div>
</BODY>
</HTML>
其中containment后面对应的是一个DOM对像,如果直接用
containment: 'outer'这样是行不通的,开始没有在意直接写成了containment:'outer'结果无效果,最后试试
containment:$('#outer') 可行、看来不系统的学习还是要走不少弯路的
不过最终还是有些问题,
如果在outer外面再加一个层
<div style="width: 500px;height: 200px;"></div>
这样还是有问题,看来还是要计算一下outer层的top,left这个坐标值
应该和 droppable options 中的axis有关系统,明天再研究一下看看
axis:'100,100'
经过研究写了一个小的DEMO,哈。假期后准备再改造一下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script src="./jquery-1.2.6.js"></script>
<script src="./ui/ui.core.js"></script>
<script src="./ui/ui.draggable.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(function() {
$('#inter').draggable({
containment: $('#outer')
});
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<div id='outer' style="width: 500px;height: 500px;background:#EEE">
<div id='inter' style="width: 100px;height: 100px;background:#ccc"></div>
</div>
</BODY>
</HTML>
其中containment后面对应的是一个DOM对像,如果直接用
containment: 'outer'这样是行不通的,开始没有在意直接写成了containment:'outer'结果无效果,最后试试
containment:$('#outer') 可行、看来不系统的学习还是要走不少弯路的
不过最终还是有些问题,
如果在outer外面再加一个层
<div style="width: 500px;height: 200px;"></div>
这样还是有问题,看来还是要计算一下outer层的top,left这个坐标值
应该和 droppable options 中的axis有关系统,明天再研究一下看看
axis:'100,100'
相关文章推荐
- jQuery窗口拖动功能的实现代码
- EasyUI + JQuery Sortable 实现可拖动工作台功能。
- Android高级界面组件之拖动条和评星条的功能实现
- jQuery与vue实现拖动验证码功能
- jQuery实现分隔条左右拖动功能
- jQuery实现分隔条左右拖动功能
- jquery 实现拖动文件上传加载进度条功能
- jQuery实现的简单对话框拖动功能示例
- jQuery与vue分别实现超级简单的绿色拖动验证码功能
- Android基于widget组件实现物体移动/控件拖动功能示例
- 基于JS组件实现拖动滑块验证功能(代码分享)
- JQuery 网站换肤功能实现代码
- js/jQuery实现复制到剪贴板功能,兼容所有浏览器
- 基于jQuery实现收缩展开功能
- JQuery实现带排序功能的权限选择实例
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- JQuery异步加载无限下拉框级联功能实现示例
- 用jQuery实现简单的加入收藏页面的功能
- Android实训案例(七)——四大组件之一Service初步了解,实现通话录音功能,抽调接口
- 基于jquery的inputlimiter 实现字数限制功能