jQuery拖放插件Gridly

所属分类:输入-拖和放

 94017  425  查看评论 (23)
分享到微信朋友圈
X
jQuery拖放插件Gridly ie兼容9

Gridly是一个jQuery插件,它能够拖动,删除和调整一个网格的大小。

使用方法

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

<script src="https://ajax.googleapis.com/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" />


例子:

使用Gridly并不难,下面是参考代码 。 参考使用就能够简单是展示出它的效果。

<style type="text/css">
  .gridly
  {
    position: relative;
    width: 960px;
  }
  .brick.small
  {
    width: 60px;
    height: 60px;
  }
  .brick.large
  {
    width: 120px;
    height: 120px;
  }
</style>
<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>
<script>
  $('.gridly').gridly();
</script>
相关插件-拖和放

图标拖拽效果,兼容所有浏览器

原生JS实现图标图片拖拽,封装好了,可以直接拿去使用
  拖和放
 38575  374

拖放交互的想法

在UI中拖放交互的一些想法,这个想法是显示一个可拖拽的区域,代表一个元素被拖拽后的某些动作。
  拖和放
 26339  345

jquery 拖拽排序

jQuery图片列表拖拽排序布局插件
  拖和放
 31989  365

拖动滑块验证

拖动滑块进行验证
  拖和放
 66186  493

讨论这个项目(23)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    安静勿扰 1
    2020/6/9 18:00:23

    如果想一行显示一个  注释if条件就可以

    for (i = _i = 0, _ref = columns.length - size; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) {
        max = Math.max.apply(Math, columns.slice(i, i + size));
        //   if (max < height) {
        height = max;
        column = i;
        //  }
    }
    回复
    许长老.?? 0
    2018/9/21 14:43:02
    为啥在手机上的时候做不了其他的点击事件,只能拖拽,有其他的解决办法么
        match10151
        2019/8/13 11:24:06

        可以在你需要点击的dom上加一个id,然后在jquery.gridly.js里找到began、ended和moved这3个funciton,把里面的event.preventDefault()改为

        if (event.target.id == '') {
          event.preventDefault();
        }

        这样就可以触发click事件了

    回复
    blackcode 0
    2018/4/12 15:14:01
    如何兼容bootstrap啊
        简简单单0
        2021/8/3 9:36:39
        不兼容bootstrap吗
    回复
    Atlantia 0
    2018/2/1 20:14:52

    请问一下,你们解决了带内容的情况吗?就是现在我使用这个插件去控制DIV的拖拽,但是DIV中如果有内容,这个插件的点击事件是覆盖整个大DIV的,就是里面的内容无法操作,基本处于只读状态。有大神解决了这个问题吗??急急急 有解决了的请联系QQ372330986谢谢

    回复
    金生水起 0
    2017/8/2 17:24:48

    获取div left top 两次排序就可以了

    回复
    Let it be 0
    2017/6/7 17:21:46

    怎么让 高度 固定不动呢

    回复
    Pomelo_K 0
    2017/1/10 14:01:29
    如果拖拽的一个div中包了一个文本框,那个文本框怎么输入内容啊,点击这个div只能拖拽
        花开不落0
        2017/9/2 14:06:30

        请问解决了吗

    回复
    味道还不错哦 0
    2016/12/18 22:12:25

    我对这个改版了下,支持外层自动宽度和排序和自动完全居中,去掉了配置项,直接配置BOX的宽度和间距大小就好了.

    这个不好的地方就是多了就很卡,为此我根据屏幕大小比如满格多少个这样算一屏的进行分屏,这样每一个屏一个独立的grildy();起码不会卡.

    目前就是唯一个问题:从A拖动到B屏时没法像按住B的某个ICON进行排序B屏.

        淡然_huang0
        2016/12/23 13:12:45

        你解决的问题可以跟我们分享吗?

    回复
    ㄣ慧?寒?☆ぷ 0
    2016/10/17 16:10:31
    他的宽高都在哪里修改啊 回复
    caijinming 0
    2016/8/18 17:08:47
    楼主移动端上用,变化位置为何不行呢 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复