CSDN博客

img bjbs_270

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

发表于2008/10/1 22:39:00  1742人阅读

分类: javascript


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

经过研究写了一个小的DEMO,哈。假期后准备再改造一下
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3.  <HEAD>
  4.   <TITLE> New Document </TITLE>
  5.   <META NAME="Generator" CONTENT="EditPlus">
  6.   <META NAME="Author" CONTENT="">
  7.   <META NAME="Keywords" CONTENT="">
  8.   <META NAME="Description" CONTENT="">
  9.   <script src="./jquery-1.2.6.js"></script>
  10.   <script src="./ui/ui.core.js"></script>
  11.   <script src="./ui/ui.draggable.js"></script>
  12.   <SCRIPT LANGUAGE="JavaScript">
  13.   <!--
  14.     $(function() {
  15.         $('#inter').draggable({
  16.             containment: $('#outer')
  17.         });
  18.     });
  19.   //-->
  20.   </SCRIPT>
  21.  </HEAD>
  22.  <BODY>
  23.   <div id='outer' style="width: 500px;height: 500px;background:#EEE">
  24.   <div id='inter' style="width: 100px;height: 100px;background:#ccc"></div>
  25.   </div>
  26.  </BODY>
  27. </HTML>           
其中containment后面对应的是一个DOM对像,如果直接用
containment: 'outer'这样是行不通的,开始没有在意直接写成了containment:'outer'结果无效果,最后试试
containment:$('#outer') 可行、看来不系统的学习还是要走不少弯路的


不过最终还是有些问题,
如果在outer外面再加一个层
  1. <div style="width: 500px;height: 200px;"></div>
这样还是有问题,看来还是要计算一下outer层的top,left这个坐标值

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

  1. axis:'100,100'

阅读全文
0 0

相关文章推荐

img
取 消
img