让元素在网页中可拖动示例代码


Posted in Javascript onAugust 13, 2013

1.导入相应的JS类库:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

2.带有id的div元素:
<div id="draggable"> 
<p>Drag me around!</p> 
</div>

3:设置div的样式:
#draggable { 
width:150px; 
height:150px; 
padding:0.5em; 
border:1px solid; 
}

4:让元素可拖动:
<script> 
$(function() { 
$('#draggable').draggable(); 
}); 
</script>

效果请点击:http://jsfiddle.net/tounaobun/KS8JC/
源代码:
<!-- import the necessary files --> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<script> 
$(function() { 
$('#draggable').draggable(); 
}); 
</script> 
<style> 
#draggable { 
width:150px; 
height:150px; 
padding:0.5em; 
border:1px solid; 
} 
</style> 
<div id="draggable"> 
<p>Drag me around!</p> 
</div>
Javascript 相关文章推荐
ExtJS的FieldSet的column列布局
Nov 20 Javascript
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
javascript 快速排序函数代码
May 30 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 #Javascript
JavaScript的Module模式编程深入分析
Aug 13 #Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 #Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 #Javascript
js setTimeout 参数传递使用介绍
Aug 13 #Javascript
js setTimeout 常见问题小结
Aug 13 #Javascript
删除select中所有option选项jquery代码
Aug 12 #Javascript
You might like
聊天室php&amp;mysql(六)
2006/10/09 PHP
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python获取任意xml节点值的方法
2015/05/05 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
Python3数字求和的实例
2019/02/19 Python
python安装scipy的方法步骤
2019/06/26 Python
Python通过len函数返回对象长度
2020/10/22 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
2014四风问题对照检查材料范文
2014/09/15 职场文书
出纳试用期自我评价
2015/03/10 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
公司规章制度范本
2015/08/03 职场文书
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android