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


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 相关文章推荐
js变量作用域及可访问性的探讨
Nov 23 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
js上下视差滚动简单实现代码
Mar 07 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Jun 15 Javascript
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与paypal整合方法
2010/11/28 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
如何用Python 加密文件
2020/09/10 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
总监职责范文
2013/11/09 职场文书
竞选演讲稿范文
2013/12/28 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
廉洁校园实施方案
2014/05/25 职场文书
展览会邀请函
2015/02/02 职场文书
英语导游欢迎词
2015/09/30 职场文书
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android