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


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(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
jquery操作select方法汇总
Feb 05 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 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
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
深入探究node之Transform
2017/07/20 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
Python Requests库基本用法示例
2018/08/20 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
python drf各类组件的用法和作用
2021/01/12 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
css3高级选择器使用方法
2013/12/02 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
通信工程专业毕业生推荐信
2013/12/25 职场文书
小区门卫管理制度
2014/01/29 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
低碳生活倡议书
2014/04/14 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
简历自我评价范文
2019/04/24 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers