jquery 可拖拽的窗体控件实现代码
2013-08-14 08:09
609 查看
引入JQUERY框架。
把这个控件代码放到一个js文件里面直接引入就可以了
控件代码
javascript代码
HTML代码
把这个控件代码放到一个js文件里面直接引入就可以了
控件代码
$.fn.myDrag = function() { var self = $(this); self.css("position", "absolute"); var p = self.position(); self.css({ left: p.left, top: p.top }); self.mousedown( function(event) { // debugger; self.data("ifDary", "true"); //保存状态,表示是否可以拖拽 // debugger; var selfLeft = event.pageX - parseInt(self.css("left")); //计算出鼠标到这个元素的left var selfTop = event.pageY - parseInt(self.css("top")); //计算出鼠标到这个元素的top self.data("selfLeft", selfLeft); //保存坐标信息 self.data("selfTop", selfTop); } ); $(document).mouseup( function() { self.data("ifDary", "false"); //防止窗体飞到外面去 var bWidth = $(window).width(); var bHeight = $(window).height(); var currentleft = parseInt(self.css("left")); var currenttop = parseInt(self.css("top")); if (currentleft <= 0) currentleft = 0; if (currentleft >= bWidth) currentleft = bWidth - self.width(); if (currenttop <= 0) currenttop = 0; if (currenttop >= bHeight) currenttop = bHeight - self.height(); self.css({ left: currentleft, top: currenttop }); } ); $(document).mousemove(function(event) { var state = self.data("ifDary"); if (state && state == "true") { var selfLeft = event.pageX - parseInt(self.data("selfLeft")); //计算这个元素的left位置 var selfTop = event.pageY - parseInt(self.data("selfTop")); self.css({ left: selfLeft, top: selfTop }); //设置这个元素的位置 } }); return self; }
javascript代码
<script src="http://www.jbxue.com /script/jquery-1.3.2.js" type="text/javascript"></script> //这个是JQUERY框架,没有的自己搜索去到处都是,一脚踩一堆 <script src="myDrag.js" type="text/javascript"></script> //这个是我的那个控件代码 <script type="text/javascript"> $(function() { $("#div1").myDrag(); }); </script>
HTML代码
<div id="div1" style="background-color: Red; height: 100px; width: 100px;"> 点击拖我吧 </div>
相关文章推荐
- jquery 可拖拽的窗体控件实现代码
- jquery 可拖拽的窗体控件实现代码
- JQuery拖拽元素改变大小尺寸实现代码
- jquery实现div拖拽宽度示例代码
- jquery下操作HTML控件的实现代码
- 基于Jquery的动态添加控件并取值的实现代码
- 基于Jquery的动态添加控件并取值的实现代码
- Window下拖拽窗体 qt实现代码
- 【转】C#中代码实现控件随窗体的自由变换
- JQuery之拖拽插件实现代码
- vs2013 窗体应用编程—控件大小随窗体变化(通过代码实现)
- jQuery实现拖拽可编辑模块功能代码
- .net mvc页面UI之Jquery博客日历控件实现代码
- 基于jquery的让页面控件不可用的实现代码
- jquery实现div拖拽宽度示例代码
- JQuery之拖拽插件实现代码
- 简单的jquery拖拽排序效果实现代码
- jquery CheckBox、RadioButton、DropDownList的取值赋值实现代码/服务器控件 gridview 循环