先下载: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. web页面请求历程

    web页面请求历程 1)准备DHCP,UDP,IP和以太网 客户端要访问www.google.com的网站. 首先客户端要与网络相接,没有IP地址地址就不能做什么事情,所以客户端采取的一个网络相关的动 ...

  2. exe 错误

    1,NTVDM 是从 WINDOWS NT 架构开始引入的一个子系统进程,目的是虚拟一个DOS环境来运行以前的DOS 16bit 程序.2,只有当启动16位DOS程序时,才会启用 NTVDM 这个进程 ...

  3. MySQL 表的增删查改

    一.插入数据 1. INSERT ... VALUES ... INSERT INTO <表名> [ <列名1> [ , … <列名n>] ] VALUES (值1 ...

  4. xmlns, xmlns:xsi, xsi:schemaLocation 解释

    xmlns, xmlns:xsi, xsi:schemaLocation 解释 xmlnsxsischemaLocation 我们在写 xml 文件时,尤其是 spring .mybatis 的配置文 ...

  5. POJ-2104-Kth Number(主席树)

    链接: https://vjudge.net/problem/POJ-2104#author=malic 题意: 给定一个数组 a[1...n],数组元素各不相同,你的程序要对每次查询Q(i,j,k) ...

  6. 20180705 SSH,SSM

    1.数据源切换2.数据库SQL server 2008R23.Herbernate,MyBaits, 框架spring mvc hibernate mybatis maven 管理 登录 spring ...

  7. artTemplate字符串模板

    1.官网:http://aui.github.io/art-template/

  8. XML DOM (Document Object Model) 定义了访问和操作 XML 文档的标准方法。

    XML DOM DOM 把 XML 文档视为一种树结构.通过这个 DOM 树,可以访问所有的元素.可以修改它们的内容(文本以及属性),而且可以创建新的元素.元素,以及它们的文本和属性,均被视为节点. ...

  9. 4.Python IDLE使用方法详解(包含常用快捷键)

    在安装 Python 后,会自动安装一个 IDLE,它是一个 Python Shell (可以在打开的 IDLE 窗口的标题栏上看到),程序开发人员可以利用 Python Shell 与 Python ...

  10. 【每日一包0005】arr-flatten

    github地址:https://github.com/ABCDdouyae... arr-flatten 将多维数组展开成一维数组 文档地址:https://www.npmjs.com/packag ...