bootstrap拖拽布局

2024-10-22

可拖动布局之Gridster

看过bootstrap可视化布局系统的人是不是都会对页面元素的拖拽有着很大的兴趣?下面呢,楼主就给大家讲两个楼主知道的拖拽小插件吧. 一.gridster 1.了解gridster 后续官网:http://dsmorse.github.io/gridster.js/ gridster.js后续的更新:https://github.com/dsmorse/gridster.js issues: https://github.com/ducksboard/gridster.js/issues 2.官

React组件：拖拽布局Dragact v0.1.6 发布

仓库地址:Dragact爽滑的拖拽组件大家好,新年已经过去,大家又投入了繁忙的工作当中,由于我在国外,因此压根儿没有休息... 少说废话,上周一周的时间里,我陆陆续续的为Dragact组件进行了一系列更新,基本上做了一个大重构,而且做了一小部分性能优化. 新特性1:性能提升通过对React 组件渲染的优化以及内部算法的优化,把大量的遍历和渲染都省掉. 优化前6s的性能优化后6s的性能大家可以看到,同样是跑6s,我们脚本计算时间,渲染时间,浏览器painting时间都有了很大幅度的提升.

jqueryui sortable拖拽后保存位置

jqueryUI sortable 可以用来进行页面拖拽布局,然而有一个小问题就是拖拽后如何保存状态. 工作中遇到了这个情况,遍把这个问题记了下来,具体思路是: 利用拖拽stop后利用 var arr = $( ".sortable" ).sortable('toArray'); 记录拖拽后的id数组顺序,然后把这个数组存起来,可以存cookie,数据库,localstorage等,刷新页面后读取这个数组,然后进行重新排序. 具体的代码如下可直接复制运行.本文将数组保存在local

React拖拽组件Dragact V0.1.7：教你优化React组件性能与手感

仓库地址:Dragact手感丝滑的拖拽布局组件预览地址:支持手机端噢- 上回我们说到,Dragact组件已经进行了一系列的性能优化,然而面对大量数据的时候,依旧比较吃力,让我们来看看,优化之前的Dragact. 纵向堆叠着314个方块,插入时明显的卡顿,大约1秒的延迟同样纵向堆叠着314个方块,插入时卡顿明显减少很多,可以接受在实际生产过程中,可能不会有那么多物块,就拿我们项目的dashboard来说,整个屏幕最多只有10个方块,就已经是了不起了. 但是强迫症犯了,为了使得性能达到极致,再

Bootstrap 可视化布局--拖拽后弹窗进行编辑

Bootstrap 可视化布局--拖拽后弹窗进行编辑最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式. 奈何各种问题不断,使用 jquery-ui中的 draggable各种坑不断,哎,一言难尽,最怕这种不是自己写的,只能不断踩坑,踩着踩着就好了最终目的效果图原始效果是没有之后的弹窗,需要点击才会有思路思路1: 将点击的代码直接放到拖拽结束时使用即可思路2: 找到被拖拽的对象,对其进行修改即可思路3: 找到点击弹窗的按钮

JS组件系列——Bootstrap Table 表格行拖拽

前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成后,左边表格减少一行,右边表格增加一行.除此之外,还需要撤销操作(

JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽如人意.先把它分享出来,以后想到更好的办法再优化吧. 一.效果展示 1.拖动前 2.拖动中 3.拖动后 4.撤销回到拖动前状态二.需求分析通过上篇我们知道,如果要实现拖拽,必须要有一个可以拖拽的标签,或者叫容器,比如上篇里面的tr就是一个拖拽的容器,那么如果要实现选择行的拖拽,那么博主的第一反应

14-UIKit（拖拽手势、布局）

目录: 1.手势创建的拖拽方式 2.frame,bounds,transform,center区别 3.触控(touch) 4.布局 5.代码布局回到顶部 1.手势创建的拖拽方式创建手势对象,修改手势对象属性,加入指定视图,这三件事都可以不用写代码,而用拖拽的方式完成. 设置拖拽方式手势代理的方法是:在第六个检查器里拖拽delegate到ViewController 设置拖拽方式手势触发调用的方法是:按住ctrl直接拖拽到.m文件里回到顶部 2.frame,bounds,transform

.net core版文件上传/ 支持批量上传，拖拽以及预览，bootstrap fileinput上传文件

asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验本篇内容主要解决.net core中文件上传的问题开发环境:ubuntu+vscode 1.导入所需要的包:nuget install bootstrap-fileinput 注意:这里的导包需要在终端导入[需要在wwwroot文件夹下执行nuget命令]如下图如果发现没有nuget命令,则需要通过apt-get 或者yum 给系统安装nuge包管理工具,这个nuget和vscode中的插件不是一回事 2

为Bootstrap模态对话框添加拖拽移动功能

请自行下载使用到的Bootstrap库及jQuery库 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="bootstrap.min.css" media="screen" rel="stylesheet&qu

基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="external nofollow" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="__PUBLIC__/CSS/fileinput.css&qu

基于jquery-ui及bootstrap的可拖拽模态框

可直接使用代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>model</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <sc

一个可变布局列表，有9种布局item大小，每个item可拖拽切换位置

代码地址如下:http://www.demodashi.com/demo/11271.html 一.准备工作准备一台安卓设备手机,4.4以上版本本例子实现,一个可变布局列表,有9种布局item大小,每个item可拖拽切换位置二.程序实现项目结构截图主界面列表程序 public class DragListActivity extends AppCompatActivity { private RecyclerView mRecyclerView; private ListAdapter

bootstrap模态框实现相对定位拖拽

1.正常的拖拽是用绝对定位absolute来实现的,可是bootstrap的模态框是用relative,为了统一更改方便,就照着相对定位来实现拖拽效果. $(".modal .modal-header").mousedown(function(e) { var isDrag = false;//是否可以拖拽 var ev = e || window.event; var ol = $(this).offset().left;//盒子最左边距离窗口最左边的距离 var ot = $

Bootstrap学习笔记之Nestable可拖拽树结构

Nestable是基于Bootstrap的一个可拖拽的树结构表现插件. 下面粗略的介绍一下它的用法,只作为学习参考,如有不合适之处,请各位凑合看. 下图是我在现在系统中用到的Nestable,对系统模块排序. 1.首先是需要引入的文件 bootstrap.min.css Bootstrap的CSS文件 font-awesome.min.css 这个是Bootstrap的一个图标和字体的插件,Nestable应该用了它的一些图标,如果不引入这个文件有可能图标不能显示出来. ace.min.css

实现Bootstrap表格拖拽

实现Bootstrap表格拖拽: 需要引入jquery.min.js.bootstrap相关文件,以及jquery.dragsort-0.5.2.js 代码如下: <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js&

【C#/WPF】GridSplitter 分割布局，拖拽控件分隔栏以改变控件尺寸

需求:界面由多部分控件组成,想要拖拽控件之间的分隔栏以改变尺寸. MainWindow.xaml: <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="300"/> <ColumnDefinition Width="300"/> </Grid.ColumnDefinitions> <ListBox Grid.Row="0"

react-grid-layout实现拖拽，网格布局

借鉴地址:https://www.jianshu.com/p/b48858eee3a7 安装 react-grid-layout npm install react-grid-layout import React, { Component } from 'react'; import { Responsive, WidthProvider } from 'react-grid-layout'; import EUevent from '@/components/eventcomponent/E

前端框架bootstrap(响应式布局)入门

Bootstrap,是基于HTML,CSS.javascript的前端框架该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加bootstrap固定的class样式,就可以轻松完成指定效果的实现. 作用: 1.Bootstrap使得Web开发更加快捷,高效 2.Bootstrap支持响应式开发,解决了移动互联网前端开发问题. 简单介绍一下: 该框架是Twitter公司的设计师Mark Otto和jacob Thornton

Qt拖拽界面 (*.ui) 缩放问题及解决办法

问题使用Qt Designer 设计的界面,在缩放的时候不能随着主窗口一起缩放. 解决办法之前遇到这个问题的时候,都是直接重写resizeEvent接口来实现的,在自动生成的Ui_Widget或Ui_MainWindow等类中会有一个widget或者centerWidget的成员,所有的拖拽出的控件都是在这之上的.只需要把resizeEvent传递给它即可. 这种方式虽然解决了问题,但是总是不太理想,还需要去改代码. 好的解决办法其实中问题不需要去改代码,既然所有的拖拽出的控件都在一个wi

使用 Jquery-UI 实现一次拖拽多个选中的元素操作

项目需要,实现一个拖放操作,要求每次可以拖拽选中的多个元素,释放到目标容器后可排序.考虑了一下,觉得jquery-ui比较合适,毕竟它提供了项目需要的交互性事件机制.拖拽.释放.排序.选择等效果.而在实际的操作中,遇到个很多的问题,说明一下,最后附上效果图和代码. 1.本人使用的bootstrap框架,引入jquery-ui后,为元素添加拖拽方法后,提示该方法不是一个函数.查找原因,是bootstrap和jquery-uide的$ 标识符控制权冲突.在引入的jquery-ui的js前加上一下语句

bootstrap拖拽布局

热门专题