自己做的实现图片等元素的拖拽
2017-10-18 00:00
260 查看
采用的是jquery1.2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <mce:script src="js/jquery.js" mce_src="js/jquery.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- $(function(){ //拖拽对象 var bar = $("#faDiv"); if (!bar.size() || !bar.size()) { $(document).unbind("mouseover").unbind("mouseup"); return; } var drag = false; var currentX = 0, currentY = 0, posX = bar.offset().left, posY = bar.offset().top; bar.bind("mousedown",dragMouseDownHandler =function(e) { drag = true; currentX = e.pageX; currentY = e.pageY; //注:mousemove与mouseup下件均针对document注册,以解决鼠标离开_controlObj时事件丢失问题 //注册事件(鼠标移动) $(document).bind("mousemove", dragMouseMoveHandler); //注册事件(鼠标松开) $(document).bind("mouseup", dragMouseUpHandler); }).css("cursor", "move"); $(document).bind("mousemove",dragMouseMoveHandler=function(e) { if (drag) { var nowX = e.pageX, nowY = e.pageY; var disX = nowX - currentX, disY = nowY - currentY; bar.css("left", posX + disX).css("top", posY + disY); //取消事件的默认动作 if(evt.preventDefault) evt.preventDefault(); else evt.returnValue = false; } }); $(document).bind("mouseup",dragMouseUpHandler=function() { drag = false; posX = bar.offset().left; posY = bar.offset().top; cleanMouseHandlers(); }); //注销鼠标事件(mousemove mouseup) var cleanMouseHandlers = function(){ if(_dragObj){ $(_dragObj.document).unbind("mousemove"); $(_dragObj.document).unbind("mouseup"); } }; }) // --></mce:script> </head> <body> <div id="faDiv" style="position:absolute;" mce_style="position:absolute;"> <img id="wrapDiv" width="100px" height="100px" src="http://img.baidu.com/img/iknow/mobile/wapiknow.jpg" mce_src="http://img.baidu.com/img/iknow/mobile/wapiknow.jpg" /> </div> <input type="button" value="test" onclick="test()"/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <input id="xtxt" /> <input id="ytxt" /> </body> </html>
相关文章推荐
- 自己做的实现图片等元素的拖拽
- 前端工作日常爬坑之——单页面微信开发Jssdk相关,以及jssdk图片直传自己服务器的实现。
- 分享一个自己利用javascript中的window.setInterval()定时器实现页面背景图片淡入淡出效果
- Android实现图片顺时逆时旋转及拖拽显示效果
- 基于jquery插件实现拖拽删除图片功能
- ie不支持getElementsByClassName,所以要自己实现获取类名为className的所有元素。
- jQuery页面滚动图片等元素动态加载实现
- HTML5图片拖拽预览原理及实现
- Java实现缓存页面中不变的元素,JS,CSS,图片等
- 自己写的鼠标单击按钮实现图片切换
- Java实现的可选择及拖拽图片的面板功能【基于swing组件】
- Android实现让图片在屏幕上任意移动的方法(拖拽功能)
- C#实现外部图片的拖拽到应用程序的简单功能,附全部源码,供有需要的参考
- VC实现图片拖拽及动画的实例
- JQuery实现个性化,可以拖拽 自定义自己的界面(三)
- Android多点触摸实现缩放和拖拽图片
- Android应用开发之实现图片的拖拽显示
- Silverlight中的拖拽实现的图片上传---1
- Winform控件Picture实现图片拖拽显示效果
- js拖拽之一:实现简单的元素拖拽