所以要引入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">

点击拖我吧

</div>