jquery 可拖拽的窗体控件实现代码

所以要引入JQUERY框架。
把我的这个控件代码放到一个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="../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>