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


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 相关文章推荐
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
webpack+vue中使用别名路径引用静态图片地址
Nov 20 Javascript
js+css实现红包雨效果
Jul 12 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
微信小程序3D轮播实现代码
Sep 19 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编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
Python初学者常见错误详解
2019/07/02 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
如何一键升级Python所有包
2020/11/05 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
现金会计岗位职责
2013/12/05 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
校园环保建议书
2014/05/14 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
Go各时间字符串使用解析
2021/04/02 Golang
python 爬取吉首大学网站成绩单
2021/06/02 Python
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB