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

最新推荐文章于 2023-04-07 17:21:08 发布

bjbs_270

最新推荐文章于 2023-04-07 17:21:08 发布

阅读量2k

点赞数

分类专栏： javascript 文章标签： jquery ui mootools generator javascript facebook

本文链接：https://blog.csdn.net/bjbs_270/article/details/3008002

版权

javascript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

'最近要实现一下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外面再加一个层