注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery拖放插件Gridly应用

jQuery插件 fishcity 1212浏览

Gridly是一个基于jQuery插件应用,它可使DIV等元素拖拽以及调整位置,也可以加上关闭按钮来关闭不需要的模板,也可以动态的添加模板,而且它实现的动画效果非常平滑与动感。 想体验的朋友可以打开实例来尝试拖动或删除任何砖块。下需jQ酷和大家一起来看下它的使用方法。

下载并且导入这些文件。其中包含jquery.gridly.js和jquery.gridly.css

<script src="https://ajax. /ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="javascript/jquery.gridly.js" type="text/javascript"></script>
<link href="stylesheets/jquery.gridly.css" rel="stylesheet" type="text/css" />

写上html,当然这里的div块可以随便定义,只需绑定到相关的类上就可以了。

<div class="gridly">
  <div class="brick small"></div>
  <div class="brick small"></div>
  <div class="brick large"></div>
  <div class="brick small"></div>
  <div class="brick small"></div>
  <div class="brick large"></div>
</div>

写入CSS样式,这里的样式只是本例的,您可以按照您的风格需求来写入

.gridly {
    position: relative;
    width: 960px;
  }
  .brick.small {
    width: 140px;
    height: 140px;
  }
  .brick.large {
    width: 300px;
    height: 300px;
  }

写入JS,实现拖动效果

  $('.gridly').gridly();

转载请注明:jQ酷 » jQuery拖放插件Gridly应用

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。