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


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 Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
js获取 type=radio 值的方法
May 09 Javascript
浅谈javascript回调函数
Dec 07 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
小程序新版订阅消息模板消息
Dec 31 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
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
原生JS实现微信通讯录
2020/06/18 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
Python中的tuple元组详细介绍
2015/02/02 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
python数据处理实战(必看篇)
2017/06/11 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
大学毕业生通用自我评价
2014/01/05 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技