弹窗作为一种组件，被广泛用于开发的系统中，可以用于用户信息录入、信息修改、导出、导入、删除等。有时为了需求需要使弹窗自由拖动，但是有时需要将弹窗固定不能拖动。下面利用一个实例说明控制弹窗禁止拖动的用法，操作如下：
工具/原料
1
jQuery
2
jQuery UI
3
CSS3
4
HTML5
5
HBuilder
6
截图工具
7
浏览器
方法/步骤
1
第一步，在HBuilder编辑工具中新建一个静态调忌页面，然后引入jQuery和jQuery UI核心的文件，如下图所示：
2
第二步，在迅巨驼
标签元素里插入一个div，设置div的ID属性值；然后在div标签内插入一个table，如下图所示：3
第三步，在jQuery初始化函数内，调用弹窗初始化方法，生成一个弹窗，如下图所示：
4
第四步，保存代码并预览，在浏览器中预览该静态页面中的效果，倘吩如下图所示：
5
第五步，在弹窗初始化方法里，添加属性“draggable:true”，这个属性为false表示禁止拖动，为true表示允许拖动，如下图所示：
6
第六步，再次保存代码并预览该页面，并使用鼠标进行拖动，可以发现不能拖动，如下图所示：
注意事项
1
注意jQuery UI中弹窗各种属性的用法
2
注意合理使用jQuery UI是否可以拖动属性
上一篇：如何用js创建标签插入指定的位置