Jquery仿iGoogle实现可拖动窗口（源码）

最新推荐文章于 2017-11-06 15:22:50 发布

wkcgy

最新推荐文章于 2017-11-06 15:22:50 发布

阅读量2.2k

点赞数

分类专栏： JavaScript 文章标签： jquery class header div stylesheet google

本文链接：https://blog.csdn.net/wkcgy/article/details/6327629

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

google可谓是ajax的特效用的淋漓尽致，google suggest， google map，igoogle 可拖动窗口等等...今天仿照iGoogle做了一个简单的小demo。

这个的demo是根据一个Jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的http://plugins.jquery.com/project/easywidgets。

废话就不多说了，直接把源代码贴出来，让大家学习！

html

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="css/my.css" mce_href="css/my.css" /> <mce:script type="text/javascript" src="js/jquery.min.js" mce_src="js/jquery.min.js"></mce:script> <mce:script type="text/javascript" src="js/jquery-ui.min.js" mce_src="js/jquery-ui.min.js"></mce:script> <mce:script type="text/javascript" src="js/jquery.easywidgets.js" mce_src="js/jquery.easywidgets.js"></mce:script> <mce:script src="js/example.js" mce_src="js/example.js" type="text/javascript"></mce:script> </head> <body>  <div id="left" class="widget-place column1"> <div id="ldiv1" class="widget movable"> <div id="header" class="widget-header"><strong>drar me</strong> </div> <div id="content" class="widget-content">左边-----用鼠标拖动</div> </div> <div id="ldiv2" class="widget movable"> <div id="header" class="widget-header"><strong>drar me</strong> </div> <div id="content" class="widget-content">左边-----用鼠标拖动</div> </div> <div id="ldiv3" class="widget movable"> <div id="header" class="widget-header"><strong>drar me</strong> </div> <div id="content" class="widget-content">左边-----用鼠标拖动</div> </div> </div>  <div id="middle" class="widget-place column2"> <div id="mdiv1" class="widget movable collapsable removable editable"> <div id="header" class="widget-header"><strong>drar me</strong> </div> <div class="widget-editbox" style="background:#CC6699" mce_style="background:#CC6699">这里就是放编辑的内容,为了显眼，我加了背景</div> <div id="content" class="widget-content">中间------用鼠标拖动</div> </div> <div id="mdiv2" class="widget movable removable editable"> <div id="header" class="widget-header"><strong>drar me</strong> </div> <div id="content" class="widget-content">中间------用鼠标拖动</div> </div> <div id="mdiv3" class="widget movable removable editable"> <div id="header" class="widget-header"><strong>drar me</strong> </div> <div id="content" class="widget-content">中间------用鼠标拖动</div> </div> </div>  <div id="right" class="widget-place column3"> <div id="rdiv1" class="widget movable"> <div id="header" class="widget-header"><strong>drar me</strong> </div> <div id="content" class="widget-content">右边------用鼠标拖动</div> </div> <div id="rdiv2" class="widget movable"> <div id="header" class="widget-header"><strong>drar me</strong> </div> <div id="content" class="widget-content">右边------用鼠标拖动</div> </div> <div id="rdiv3" class="widget movable"> <div id="header" class="widget-header"><strong>drar me</strong> </div> <div id="content" class="widget-content">右边------用鼠标拖动</div> </div> </div> </body> </html>

css

body{ margin: 0; padding: 0; background-color: silver; font-family: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif; color: #666; font-size:20px; line-height:150%; } #left{ width: 380px; height: 100%; padding: 10px; position: absolute; top: 10px; left: 10px; border: solid red 2px; } #left .widget { width: 340px; height: 150px; padding; 10px; margin: 20px; border: solid red 2px; background-color: white; } #left .widget .widget-header { width: 340px; height: 30px; padding: 0; margin: 0; color: red; position: static; background-color: gray; } #middle{ width: 400px; height: 100%; position: absolute; top:10px; left: 435px; padding: 10px; margin: 0 30px 0; border: solid red 2px; } #middle .widget { width: 360px; height: 150px; padding; 10px; margin: 20px; border: solid red 2px; background-color: white; } #middle .widget .widget-header { width: 360px; height: 30px; padding: 0; margin: 0; color: red; position: static; background-color: gray; } #right{ width: 380px; height: 100%; padding: 10px; position: absolute; top: 10px; right: 10px; border: solid red 2px; } #right .widget { width: 340px; height: 150px; padding; 10px; margin: 20px; border: solid red 2px; background-color: white; } #right .widget .widget-header { width: 340px; height: 30px; padding: 0; margin: 0; color: red; position: static; background-color: gray; }

$(document).ready(function(){ $.fn.EasyWidgets({ i18n : { editText : '编辑', closeText : '关闭', extendText : '展开', collapseText : '折叠', cancelEditText : '取消' } }); });

毕竟是一个测试的例子，我的目标就是会用就可以了，因为自己的css不太好，所以效果挺恶心的！不过功能实现了，但是再拖动的时候，div会有晃动，不知道咋解决！！最后贴一张效果图：拖动前：