先下载: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. Linux操作系统笔记

    #include <stdio.h> #include <stdlib.h> #include <unistd.h> //linux下面的头文件 #include ...

  2. 基于SOA的图书商城系统分析

    1.1什么是SOA架构? SOA( Service Oriented Architecture)是一种面向服务的分布式架构,将每个实现特定功能的工程拆分为服务层和表现层.服务层负责处理业务逻辑,对外提 ...

  3. ARM工作模式寻址

    用户模式(User)                 usr 快速中断模式(FIQ) fiq 普通终端模式(IRQ)     irq 保护模式(Supervisor) svc 数据访问终止模式(Abo ...

  4. JDK12的安装搭建

    JDK12的安装搭建 一.JDK下载 ​ 1.JDK官网下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk12-down ...

  5. SSH整合——登录模块

    1.导包——参照我的GitHub Hibernate hibernate/lib/required hibernate/lib/jpa 数据库驱动 Struts2 struts-blank.war/W ...

  6. Ubuntu16.04下caffe CPU版的图片训练和测试

    一 数据准备 二.转换为lmdb格式 1.首先,在examples下面创建一个myfile的文件夹,来用存放配置文件和脚本文件.然后编写一个脚本create_filelist.sh,用来生成train ...

  7. 【学习】026 Zookeeper

    什么Zookeeper Zookeeper是一个分布式开源框架,提供了协调分布式应用的基本服务,它向外部应用暴露一组通用服务——分布式同步(Distributed Synchronization).命 ...

  8. [每日一学]apache camel简介

    apache camel 是轻量级esb框架.如下是它的架构图: 它有几个比较重要的概念就是: 1.endpoint,所谓的endpoint,就是一种可以接收或发送数据的组件.可以支持多种协议,如jm ...

  9. MySQL Select查询

    1. 基本语法: SELECT {* | <字段列名>} [ FROM <表 1>, <表 2>… [WHERE <表达式> [GROUP BY < ...

  10. 解决Eclipse中新建jsp文件ISO8859-1 编码问题

    看了许多的贴说是在eclipse --> window --> Preferences --> General --> Content Types --> text--& ...