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


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 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
学习ExtJS table布局
Oct 08 Javascript
传智播客学习之java 反射
Nov 22 Javascript
JQuery 学习技巧总结
May 21 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
浅析Node.js:DNS模块的使用
Nov 23 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
layui表格内容溢出的解决方法
Sep 06 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的开合式多级菜单程序
2006/10/09 PHP
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
php树型类实例
2014/12/05 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
浅谈PHP进程管理
2019/03/08 PHP
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
Python实现的密码强度检测器示例
2017/08/23 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
python语言的优势是什么
2020/06/17 Python
Python如何读取、写入CSV数据
2020/07/28 Python
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
学生安全承诺书
2014/05/22 职场文书
党员自我评价范文2015
2015/03/03 职场文书
家长通知书家长意见
2015/06/03 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
MySql数据库触发器使用教程
2022/06/01 MySQL