JQuery 图片拖拽练习
2013-05-09 11:02
302 查看
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> img { width: 100px; height: 100px; } #mydiv { width: 500px; height: 300px; border: solid 1px red; } #mydiv2 { width: 500px; height: 300px; border: solid 1px red; } </style> <script src="js/Jquery1.7.js" type="text/javascript"></script> <!-- <script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>--> <script src="js/jquery.ui.core.js" type="text/javascript"></script> <script src="js/jquery.ui.widget.js" type="text/javascript"></script> <script src="js/jquery.ui.mouse.js" type="text/javascript"></script> <script src="js/jquery.ui.draggable.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('img').draggable({ //axis:'y'//规定只能沿y轴拖动 //containment: '#mydiv' //规定拖动的区域 //containment: 'parent' //父容器的另一种写法 //containment: '#mydiv2' //规定的拖动区域可以不是元素的父容器 //grid:[50,50] opacity: 0.3, //设置拖动时的透明度 //revert: true, start: function () { $('#mydiv2').text('开始移动了'); }, stop: function () { $('#mydiv2').text('停了'); }, drag: function () { //$('#mydiv2').text('一直在努力'); $('#mydiv2').text($('img').offset().left + "," + $('img').offset().top); } }); //设置一个元素的距离浏览器左边缘和上边缘的距离(横坐标和纵坐标) $('#Button1').click(function () { $('img').offset({ left: 200, top: 200 }); }) }) </script> </head> <body> <div id="mydiv"> <img src="images/2.jpg" /></div> <div id="mydiv2"> <input id="Button1" type="button" value="button" /> </div> </body> </html>
相关文章推荐
- jquery应用-图片拖拽排序
- jquery利用拖拽方式在图片上添加热链接
- 使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
- jQuery实现图片轮播小练习
- jquery图片查看插件,支持旋转、放大、缩小、拖拽、缩略图(仿qq图片查看)
- 使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
- 使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
- 基于jquery插件实现拖拽删除图片功能
- about _jQuery + Flex 通过拖拽方式动态改变图片
- j2se图片拖拽练习
- jQuery-uploader轻量级图片上传控件(可拖拽)
- jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
- jquery动态加载图片数据练习代码
- jquery应用-图片拖拽排序
- 别人用jquery写的图片拖拽效果
- jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
- 可拖拽、拼接、放大图片的jQuery相册特效代码
- jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
- 小练习:图片轮播jQuery版
- 使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用