用 Jquery 的UI DRAG组件实现拖动功能

womendu

浏览: 1510150 次
性别:
来自: 北京

最近访客更多访客>>

u012363178

Start_one

maxloop

fchyang

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1284)

社区版块

存档分类

UI jQuery Mootools Facebook JavaScript

'最近要实现一下facebook中的photo tag功能，并对其进行扩展，在实现拖动功能时采用了$.event.special.drag 发现在实现被拖动的层不能超出固定的大小很是麻烦，不过实现了，趁放假考虑一下其它的方法，发现mootools框架中的拖动可以很容易的实现，不太相信jquery实现了，只是怀疑自己没有找到而已，后来想到了UI组件，在进行一番的文档查看后发现了ui.droppable.js这个文件。

经过研究写了一个小的DEMO，哈。假期后准备再改造一下

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
<TITLE>NewDocument</TITLE>

<METANAME="Generator"CONTENT="EditPlus">

<METANAME="Author"CONTENT="">

<METANAME="Keywords"CONTENT="">

<METANAME="Description"CONTENT="">

<scriptsrc="./jquery-1.2.6.js"></script>

<scriptsrc="./ui/ui.core.js"></script>

<scriptsrc="./ui/ui.draggable.js"></script>

<SCRIPTLANGUAGE="JavaScript">
<!--
$(function(){

$('#inter').draggable({

containment:$('#outer')
});
});

//-->
</SCRIPT>
</HEAD>
<BODY>

<divid='outer'style="width:500px;height:500px;background:#EEE">

<divid='inter'style="width:100px;height:100px;background:#ccc"></div>
</div>
</BODY>
</HTML> 

其中containment后面对应的是一个DOM对像，如果直接用
containment: 'outer'这样是行不通的，开始没有在意直接写成了containment:'outer'结果无效果，最后试试
containment:$('#outer') 可行、看来不系统的学习还是要走不少弯路的

不过最终还是有些问题，
如果在outer外面再加一个层

<divstyle="width:500px;height:200px;"></div>

这样还是有问题，看来还是要计算一下outer层的top,left这个坐标值

应该和 droppable options 中的axis有关系统，明天再研究一下看看

axis:'100,100'

分享到：

读博申请的新变化：香港理工-->上海交大or ... | Elgg 中引用自定义的JS

2008-10-01 22:39
浏览 979
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论