先下载:http://code.jquery.com/ui/1.10.3/jquery-ui.js

$('.i-i-yuan').draggable({
containment: '#app'//可通过设置拖动范围的div的id来限制拖动空间的移动范围
});
.i-i-yuan{
position: fixed;
cursor: pointer;
right: 50px;
bottom: 50px;
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
color: #B60000;
border-radius: 50%;
box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
background: -webkit-linear-gradient(#ffc000, #c59e29); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(#ffc000, #c59e29); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(#ffc000, #c59e29); /* Firefox 3.6 - 15 */
background: linear-gradient(#ffc000, #c59e29); /* 标准的语法 */
}

web可拖动控件js的更多相关文章

  1. “此网页上的某个 Web 部件或 Web 表单控件无法显示或导入。找不到该类型,或该类型未注册为安全类型。”

    自从vs装了Resharper,看见提示总是手贱的想去改掉它.于是乎手一抖,把一个 可视web部件的命名空间给改了. 喏,从LibrarySharePoint.WebPart.LibraryAddEd ...

  2. WEB进度条控件

    近段时间为了工作的需要学习了一下写自定义控件,呵呵!以前没写过,近段时间才开始研究的,昨天写了一个WEB状态条控件,可以设置进度条的百分比,也可以设置它的总数与当前的数量来自动计算百分比,可以设置颜色 ...

  3. Atitit..组件化事件化的编程模型--(2)---------Web datagridview 服务器端控件的实现原理and总结

    Atitit..组件化事件化的编程模型--(2)---------Web datagridview 服务器端控件的实现原理and总结 1. 服务端table控件的几个流程周期 1 1.1. 确认要显示 ...

  4. wxpython 中 用鼠标拖动控件 总结

    #encoding: utf-8 import wx import os import noname class Frame( noname.MyFrame1 ): def __init__(self ...

  5. win10 uwp 拖动控件

    我们会使用控件拖动,可以让我们做出好看的动画,那么我们如何移动控件,我将会告诉大家多个方法.其中第一个是最差的,最后的才是我希望大神你去用. Margin 移动 我们可以使用Margin移动,但这是w ...

  6. 选择控件js插件和使用方法

    记录一下 选择控件js插件 /* * 滚动控件,包含地址选择.时间选择.自定义单选 */ //js_inputbox input 输入框 //js_pickviewselect 下拉单项选择 //js ...

  7. 【WEB自动化测试之控件定位】基于HTML5控件的唯一控件属性定位

      一.WEB控件定位是什么 要想弄懂这个问题,我们还是基于实践来学习.我们先来看一条入门级别自动化测试用例的构成. DemoCase:正确用户名和密码登录博客园,登录成功 URL: https:// ...

  8. web前端开发控件学习笔记之jqgrid+ztree+echarts

    版权声明:本文为博主原创文章,转载请注明出处.   作为web前端初学者,今天要记录的是三个控件的使用心得,分别是表格控件jqgrid,树形控件ztree,图表控件echarts.下边分别进行描述. ...

  9. Web 页面测试总结—控件类

    web端页面测试,最常见的是基本控件的测试,只有了解常见的控件和其测试方法,才能掌握测试要点,避免漏测情况发生.根据日常工作总结,将控件和常见逻辑集合在一起,总结了几个控件类测试查场景如下. 导航条 ...

随机推荐

  1. python程序超时处理 timeout_decorator

    如下两个例子,实现对某个函数的超时处理(其实就是加了一个装饰器timeout): 成功例子: 代码: import time import timeout_decorator @timeout_dec ...

  2. Inno setup 开源的安装包打包软件

    Inno Setup是一个开源的安装包打包软件,下载地址是:http://www.jrsoftware.org/isdl.php 使用引导界面创建一个安装包打包 配置参考官方文档:http://www ...

  3. PIL 中的 Image 模块

    转载:http://www.cnblogs.com/way_testlife/archive/2011/04/20/2022997.html   PIL 中的 Image 模块 本文是节选自 PIL ...

  4. 移动端布局基础viewport

    划重点 手机屏幕相对着桌面浏览器小,传统网页的设计在手机上体验糟糕 Apple 在移动版 Safari 中定义了 viewport meta 标签(如果没记错最早提出的话),用于创建一个虚拟窗口(la ...

  5. jvm——分层编译

    https://www.cnblogs.com/andy-zhou/p/5327288.html 分层编译根据编译器编译.优化的规模与耗时,划分出不同的编译层次: 第0层:程序解释执行,解释器不开启监 ...

  6. 大数乘法(A * B Problem Plus)问题

    大数乘法问题一般可以通过将大数转换为数组来解决. 解题思路 第1步 第2步 第3步 第4步 样例输入1 56 744 样例输出1 800 样例输入2 -10 678 样例输出2 -6780 样例输入3 ...

  7. java.lang.IllegalArgumentException: java.io.IOException: Alias name [tomcat] does not identify a key entry

    java.lang.IllegalArgumentException: java.io.IOException: Alias name [tomcat] does not identify a key ...

  8. 在最新的 create-react-app 中添加 less 支持

    前置知识: 把 webpack 的相关配置暴露出来 运行 git add -A 运行 git commit -m 'project init' 运行 yarn eject 然后选 y 项目中多出来两个 ...

  9. 一个优雅的图片裁剪插件vue-cropper

    github:  https://github.com/xyxiao001/vue-cropper

  10. 3-Gitblit服务器搭建及IDEA整合Git使用

    背景:虽然有GitHub.GitLab这样强大的Git仓库,但是涉及私有Git库要收费,所以自己动手搭建免费的用用 环境:windows 7 旗舰版.JDK 1.8.IDEA 2017 ------- ...