draggable()拖拽时限制移动区域

jQuery-UI为我们提供了一个非常便捷的拖拽方法:draggable(),在使用此方法时,我们可能会希望控件只在某一区域中移动,不能被拖出边界,这样的话我们可以使用下面的方法:

调用draggable()时:

$(‘#element‘).draggable({containment: ‘#background‘});

上述代码是将element的拖拽范围限制在background之中。

draggable()的参数详见http://blog.csdn.net/liu_111111/article/details/8906025

原文地址:https://www.cnblogs.com/sunlinan/p/8184336.html

时间: 2024-10-09 21:32:53

draggable()拖拽时限制移动区域的相关文章

jquery-ui.min.js的draggable()拖拽功能

<!doctype html><html lang="en"><head><meta charset="utf-8"><script src='http://libs.baidu.com/jquery/1.7.2/jquery.min.js'></script><script src="http://libs.baidu.com/jqueryui/1.9.0/jquery-ui.

一步一步实现JS拖拽插件

js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠标 3.拖拽元素到一定位置,放开鼠标 这里的过程涉及到三个dom事件:onmousedown,onmousemove,onmouseup.所以拖拽的基本思路就是: 1.用鼠标点击被拖拽的元素触发onmousedown (1)设置当前元素的可拖拽为true,表示可以拖拽 (2)记录当前鼠标的坐标x,y

利用jQuery UI为CMS网站实现拖拽布局效果,秒杀table布局

1 实现效果 对于使用过CMS系统制作网站的人应该都清楚,制作网站过程有一个重要的步骤就是制作页面布局.目前,实现页面布局有两种方式:table与div.这两种方式各有其优劣之处. Table: 优势:使用简单,使用表格进行布局顺理成章,概念和效果图理解起来很简单,制作也方便. 劣势:表格布局比较固定,布局效果控制的比较死,一些较为特殊的效果.层叠效果等比较难以实现. Div: 优势:布局效果灵活,div能轻易的控制布局位置,浮动效果等. 劣势:操作较为复杂,需要前端布局设计人员对div的特性.

拖拽事件_4

window.onload=function () { var oBox=document.getElementById("box"); var oUl=document.getElementById("oUl"); oBox.ondragenter=function () { this.innerHTML="可是释放鼠标了"; } oBox.ondragover=function(ev){ var ev=ev||event; ev.preven

HTML5——将图片拖拽上传

如下图所示: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #div1{width:200px;height:200px;background:red;} </style> <script type="te

File杂谈——拖拽上传前传

在<[File杂谈--初识file控件](http://www.seejs.com/archives/668 "File杂谈--初识file控件")>一文中,我们已经对file控件有了初步的了解,并且对制作一个视觉和体验一致的file控件做了较为详细的说明,今天我们继续了解file控件的更多特性,并延伸出更多. ## 新增属性 在HTML5到来之前,绝大多数情况下使用file控件,我们前端工程师需要的有用信息都只能通过value属性获得的文件名字符串来获取(比如:文件类型.

文件拖拽上传

1 <style> 2 div{ 3 width: 300px; 4 height: 300px; 5 border:1px dashed #000; 6 position:absolute; 7 top: 50%; 8 left: 50%; 9 margin:-150px 0 0 -150px; 10 text-align:center; 11 font:20px/300px '微软雅黑'; 12 display:none; 13 } 14 </style> 15 <scr

拖拽至购物车

此需求用到了四大功能点,1.重构alert,confirm:2.拖拽功能:3.读取静态json:4.ajax提交产品信息: 此需求要求安装在客户方互动茶几终端上,要求尽量方便,无需配置相关语言环境,纯静态化: alert,confirm,在之前的文章中有详细描述,这边就不再写了. 演示地址:http://120.26.59.104/text/list.html 此项目是展示在大屏本地上,外网访问首次加载可能会慢 1.拖拽使用了jquery插件模式 (function($) { var old =

jquery图片查看插件,支持旋转、放大、缩小、拖拽、缩略图(仿qq图片查看)

最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. 多张图片切换,键盘左右键或左右箭头切换 2. 旋转 3. 放大,支持鼠标滚轮 4. 缩小,支持鼠标滚轮 5. 右下角缩略图 6. 拖拽大图 7. 全屏 PS:下面是插件各状态下效果,demo示例会在最后放出来. 全屏 全屏是容器的最大化. 缩小 可以点击缩小图标或者鼠标滚轮向下滚,可以缩小图片. 放