结构-行为-样式-JqueryUI拖放使用实例(全)
最近工作中有个需要是动态配置页面,想到之前公司有做过类似的,用的是JqueryUi,所以就看了下它的Api。下面就是我做的小Demo,想用的同学可以参考:
Html:
<div class="page-component"> <div class="pct-content"> <div class="btn btn-default special" id="one" >我是可以拖动的对象</div> </div> </div> <div id="dropzone" class="dropzone"></div>
Js:
$( $("#dropzone").droppable({ scope:"tasks",//域,拖动的域与拖放的域要相同才可以放进去 accept: ".special",//接受的Drag对象中要有的类 tolerance: "fit",//元素在什么情况下才算是拖放进入了Droppable区域,FIT就是全部进入才算进入 drop:function(event,ui){//放,这个动作的回调函数 var uid = ui.draggable[0].id; var dropzone = $("#dropzone").offset();//得到相对drop区域的绝对位置 var oleft = ui.position.left - dropzone.left;//得到相对drop区域的绝对位置 var otop = ui.position.top - dropzone.top;//得到相对drop区域的绝对位置 $(this).append($("<div class='cloneele' style='left:"+oleft+"px;top:"+otop+"px;'><a href='javascript:;' class='close ' ><i class='glyphicon glyphicon-remove'></i></a><img src='images/component/"+uid+".png'/></div>")); $(".cloneele").draggable({ opacity: 0.35, revert: function(a){//控制已经拖放进入Drop区域的元素只能在Drop区域拖动 var c = $(this)[0]; var t = c.style; var d = $("#dropzone")[0]; var ch = d.clientHeight; var cw = d.clientWidth; var num_left = parseFloat(t.left.split("px")[0]); var num_top = parseFloat(t.top.split("px")[0]); if(num_left<0 || num_left + c.clientWidth - cw > 0 || num_top < 0 || num_top + c.clientHeight - ch > 0 ){ return true; }else{ return false; } }, snap: true,//自动吸附 cursor: "pointer"//拖动鼠标指针 }).resizable(); //删除添加进入Drop区域的元素 $(".dropzone .close").bind('click',function(){ $(this).parent().remove(); }); //drag了一次的元素不能再拖动 $( "#"+uid ).draggable( "option", "disabled", true ); } }); $(".special").draggable({ helper:"clone",//设置拖动类型为克隆 opacity: 0.35,//拖动对象的透明度 snap: true,//自动吸附 cursor: "pointer",//拖动鼠标指针 appendTo: "body", scope:"tasks"//域,拖动的域与拖放的域要相同才可以放进去 }); );
结构-行为-样式-JqueryUI拖放使用实例(全)的更多相关文章
- jquery-ui sortable 使用实例
jquery-ui sortable 使用实例 最近公司需要做任务看板,需要拖拽效果.点击查看效果.由于网站是基于vue的技术栈,最开始找了一个现成的vue封装的拖拽组件:Vue.Draggable, ...
- C语言定义结构体指针数组并初始化;里面全是结构体的地址
#include <stdio.h> #include <string.h> struct tells;//声明结构体 struct info { char *infos; } ...
- 结构-行为-样式 - Angularjs 环境下Ztree结合JqueryUI实现拖拽
新的项目中有一个需求是要求客户标签可以自定义,于是就想到了客户体验,让客户自己拖拽标签进行组合查询.但是理想很丰满,现实很骨感.一开始就遇到了问题,各个插件之间的结合问题,折腾一翻之后终于实现了这个功 ...
- 解决JqueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug
前些日子不是在做 使用Jquery-UI实现一次拖拽多个选中的元素操作嘛,在持续完善这个组件时遇到了一个关于拖放排序的bug.今天就着图片和代码重现一下,也顺便告诉大家如何解决这个问题. 首先先上图描 ...
- WordPress插件--WP BaiDu Submit结构化数据插件又快又全的向百度提交网页
一.WP BaiDu Submit 简介 WP BaiDu Submit帮助具有百度站长平台链接提交权限的用户自动提交最新文章,以保证新链接可以及时被百度收录. 安装WP BaiDu Submit后, ...
- 基于Jquery-ui的自动补全
1.添加CSS和JS引用 <script type="text/javascript" src="javascript/jquery-1.7.min.js" ...
- 练习笔记:net,JqueryUI实现自动补全功能
1.首先建立个空的Web项目 2.将下载好的JqueryUI文件保存到JS文件加下 3.引入JS文件 <link href="JS/css/ui-lightness/jquery-ui ...
- SSRS报表服务随笔(rdl报表服务)-报表结构与样式
设计rdl报表,比设置HTML页面简单多了,Reporting报表分为页眉,页脚,主体三个部分 rdl文件实际是xml结构的文件,具体是什么语言呢,很抱歉,这点我还不能回复,在我看来,是由固定节点的x ...
- Linux 文件管理命令语法、参数、实例全汇总(一)
命令:cat cat 命令用于连接文件并打印到标准输出设备上. 使用权限 所有使用者 语法格式 cat [-AbeEnstTuv] [--help] [--version] fileName 参数 ...
随机推荐
- Model和Entity Framework
Model和Entity Framework 上一节:ASP.NET MVC 5 入门教程 (4) View和ViewBag 下一节:ASP.NET MVC5 + EF6 入门教程 (6) View中 ...
- android简单的计算器
所使用的算法:表达式求值(中缀表达式转后缀表达式,后缀表达式求值值) 不如何设计接口,有时间来美化! MainActivity.java package com.example.calculator; ...
- jQuery百叶窗图片滑块
超酷的jQuery百叶窗图片滑块实现教程 今天我们要来分享一款基于jQuery的百叶窗焦点图插件,也可以说是图片滑块插件.这种jQuery焦点图插件的应用非常广泛,在早些年前,我们需要用flash ...
- Oracle左连接,右连接
Oracle左连接,右连接 数据表的连接有: 1.内连接(自然连接): 只有两个表相匹配的行才能在结果集中出现 2.外连接: 包括 (1)左外连接(左边的表不加限制) (2)右外连接(右边的表不加限制 ...
- 自己动手实现Expression翻译器 – Part Ⅲ
上一节实现了对TableExpression的解析,通过反射创建实例以及构建该实例的成员访问表达式生成了一个TableExpression,并将其遍历格式化为”Select * From TableN ...
- 设置checkbox为只读(readOnly)
方式一: checkbox没有readOnly属性,如果使用disabled=“disabled”属性的话,会让checkbox变成灰色的,用户很反感这种样式可以这样让它保持只读:设置它的onclic ...
- Remoting接口测试工具
动手写一个Remoting接口测试工具 基于.NET开发分布式系统,经常用到Remoting技术.在测试驱动开发流行的今天,如果针对分布式系统中的每个Remoting接口的每个方法都要写详细的测试脚本 ...
- 定步长的龙格库塔7(8)阶C++程序(RKF78)
定步长,可以在稍微修改之后变为变步长形式,代码如下: void rkf78c( double h, double& T, vxd& X, double& err) { int ...
- GMap.Net
GMap.Net开发之在WinForm和WPF中使用GMap.Net地图插件 GMap.NET是什么? 来看看它的官方说明:GMap.NET is great and Powerful, Free ...
- linux下sshd_config的StrictModes参数
今天在两台机器A和B上设置免密码登录,A机是Centos6.5,B机是Centos7,我想通过A机免密码登录到B机,在两台机器上设置好公钥和私钥后,在A机上通过ssh连接B机,每次都是要让我手动输入密 ...