jquery拖拽
2016-05-09 22:40
363 查看
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> *{ margin:0; padding:0;} #div1{ width:100px; height:100px; background:red; position:absolute; left:100px; top:100px;} </style> <script src="jquery-1.11.1.js"></script> <script> //在JQ中的事件操作都是绑定的形式 $(function(){ var disX = 0; var disY = 0; var $div = $('#div1'); $div.on('mousedown',function(ev){ disX = ev.pageX - $(this).offset().left; disY = ev.pageY - $(this).offset().top; $(document).on('mousemove',function(ev){ $div.css('left',ev.pageX - disX); $div.css('top',ev.pageY - disY); }); $(document).on('mouseup',function(){ $(this).off(); }); return false; }); }); </script> </head> <body style="height:2000px;"> <div id="div1">div</div> </body> </html>
相关文章推荐
- Jquery中bind和live.one,delegate的区别
- jQuery闭包学习笔记
- Jquery实现缓慢显示下拉菜单
- 关于pjax.reload()加载页面时出现aborted超时终止的问题
- jQuery实现手机竖直手风琴效果
- jquery选项卡
- jQuery中的$(document).ready()与js中的window.onload
- jQuery的XX如何实现?——1.框架
- JQuery入门
- Jquery中动态的给元素绑定事件
- jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()、DomContentLoaded()区别
- 关于jquery 取值,赋值常用控件的问题
- jquery监听鼠标滚轮(滚动)事件
- 基于jquery实现智能表单验证操作
- 基于jquery实现表格内容筛选功能实例解析
- jQuery 三级菜单
- jQuery绑定事件-多种实现方式总结
- jquery 处理 json
- jQuery在HTML中动态插入节点的常用方法
- jquery easyui 弹出对话框被activex控件遮挡问题