jquery gridly (拖拽插件)

Jquery Gridly 在项目中的使用

1.引入 js 和 css 两个文件，项目中位置如下

  /erptheme/jqueryGridly/jquery.gridly.js/erptheme/jqueryGridly/jquery.gridly.css复制代码

2.在页面引入

<style type="text/css">.gridly {position: relative;}</style>
<div class="gridly"><div class="brick"></div><div class="brick"></div><div class="brick"></div><div class="brick"></div><div class="brick"></div><div class="brick"></div>
</div>
<script>var reordered = function($elements){//当前拖拽对象var currentObj =this.reordered.arguments[1];if(typeof(currentObj)!= "undefined"){//拖拽后模块数组var arr = $elements;}}$('.gridly').gridly({base: 60, // px   基本值gutter: 20, // px  沟渠，指模块间的间隔columns: 12  //      列,并不是一行几个div块，而是基于需要预留出多少个base   callbacks:{reordered:reordered }  //拖拽后回调函数});</script>
复制代码

举例：一行有两个需要拖拽的块，一个宽30，一个宽60 ，那么 base:30 columns:3
如果给的 columns 越大，可以拖拽的范围就越大

转载于:https://juejin.im/post/5c6f730d6fb9a049a42fa6d0

jquery gridly (拖拽插件)相关推荐

拖拽插件jquery.dad.js
带删除功能: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
java se拖动插件_JQuery之拖拽插件
Jeremy - DragDrop Test !(function($) { $.extend({//获取鼠标当前坐标mouseCoords:function(ev){if(ev.pageX||ev. ...
java se拖动插件_JQuery之拖拽插件实现代码
而很多页面效果都要用到这些位置.不得已,得练练,得记记. 下面就来说说这个基于 JQuery的简易拖拽插件吧. 按惯例,先说说拖拽的原理,以及搞这么一个东东的步骤: 那什么是拖拽呢? 看名字就知道了: ...
【组件】前端js拖拽插件 VUE
[组件]前端js拖拽插件 VUE Vue Draggable - Vue 拖拽组件王者 Vue drag resize - 轻量级,无依赖,可缩放 Vue smooth dnd - 简单动效,上下拖拽 ...
js 拖拽生成html,js拖拽插件 js 拖拽控件生成自定义表单怎么实现
想请教一个js的问题,拖拽控件 js 拖拽控件生成自定义表单怎么实现说说步骤吧监听mousedown事件 - 获取鼠标点击元素,判断是否可拖拽 - 设置flag做标记 - 建一个tempDOM, ...
sortable 拖拽时互换目标的位置_双端通用型JS拖拽插件的封装与应用
最近工作中遇到一个需求,需要将一个元素从某位置拖动到另一固定位置后执行某一交互行为,具体效果如下: 这个看似简单的需求,然而实现起来却并不那么顺利.我首先想到的是如何通过哪个现有的插件来快速解决这个问 ...
vue3TS+Jsplumb+vuedraggable拖拽插件使用记录
安装拖拽插件 vue3需下载-@next此版本,否则会出现错误 npm i -S vuedraggable@next npm install sortablejs --save //拖拽组件依赖sor ...
jquery 磁铁模式控件_利用JQuery拖拽插件实现拖拽效果
asp教程x.cs" inherits="jquerydrag._default" %> $(document).ready(function() { //拖拽方法 ...
jquery ui 拖拽
Query UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量的 ...

jquery gridly (拖拽插件)

Jquery Gridly 在项目中的使用

jquery gridly (拖拽插件)相关推荐

最新文章

热门文章