js实现拖动层，兼容IE/FireFox

先添加一个div层

<div id='pop-editor' style='width: 520px;height:430px;border:1px solid red;position: absolute;left:100px;top:200px;' onmousedown='down(event)' onmouseup='up()'>asdfdsf</div>

JavaScript代码如下：

var posX;
var posY;
var popDiv;
var dragable;

function down(e){
	popDiv = document.getElementById("pop-editor");
	e = e || window.event; //如果是IE 
	posX = e.clientX - parseInt(popDiv.style.left);   
	posY = e.clientY - parseInt(popDiv.style.top);
	dragable = true;
	document.onmousemove = move;
}

function move(ev){
	if(dragable == true){
		ev = ev || window.event;//如果是IE
		popDiv.style.left = (ev.clientX - posX) + "px";   
		popDiv.style.top = (ev.clientY - posY) + "px";   
	}
}

function up(){
	dragable = false;
}

兼容了IE/FireFox,其他的浏览器没试过。在IE中，event可以不用显示调用，全部用window.event就可以了，但是在FireFox中，必须显示event调用，也就是在调用函数的时候要带上event参数，如down(event)，在函数中也要判段event是在IE还是在FireFox下，ev = ev || window.event，如果在IE下，ev就是window.event，如果在FireFox下，ev就是event，这样就兼容了IE和Firefox


这里补充一下，在div中要设置left top  position，position要是绝对的。

评论

19 楼 zhengyutong 2010-01-28  

寄生虫 写道

搭车放个jQuery的吧

(function($){
  $.dragInit = function(c) {
    var trigger = c.trigger ? c.trigger : c.target;
		var target = c.target;
    if(!target)
      return;
    trigger.css('cursor', 'move');
		var d = $(document);
		trigger.mousedown(function(e){
			var positionX = e.clientX - target.offset().left;
			var positionY = e.clientY - target.offset().top;
			d.mousemove(function(e){
				target.css({
					position: 'absolute',
					left: e.clientX - positionX,
					top: e.clientY - positionY
				});
			});
			d.mouseup(function(){
				d.unbind('mousemove');
				d.unbind('mouseup');
			});
		});
  }
}(jQuery));

能否解释一下代码？

18 楼 eddy45 2010-01-27  

为啥我在IE下验证不通过，IE7/IE6都不行，firfox是能可以的！

17 楼 yyang1986321 2010-01-27  

jQuery的ui很强大啊，不过通过lz这样的小例子来学习js也挺不错的，昨天修改了一个可拖动单元格的table，学到不少东西

16 楼 peachtao 2010-01-26  

jquery 的ui早就实现可拖动的层了，只要将js文件包含进来 一句话搞定。
如果要实现这样的功能 ，建议各位看下jquery 挺好用。
上手容易 是哟个简单。对dom操作方便极了

15 楼 hsys 2010-01-26  

寄生虫 写道

搭车放个jQuery的吧

(function($){
  $.dragInit = function(c) {
    var trigger = c.trigger ? c.trigger : c.target;
		var target = c.target;
    if(!target)
      return;
    trigger.css('cursor', 'move');
		var d = $(document);
		trigger.mousedown(function(e){
			var positionX = e.clientX - target.offset().left;
			var positionY = e.clientY - target.offset().top;
			d.mousemove(function(e){
				target.css({
					position: 'absolute',
					left: e.clientX - positionX,
					top: e.clientY - positionY
				});
			});
			d.mouseup(function(){
				d.unbind('mousemove');
				d.unbind('mouseup');
			});
		});
  }
}(jQuery));

JQuery很强大，但是我还不会，你的代码我收下了，好好研究下，谢谢

14 楼 hsys 2010-01-26  

elvishehai 写道

一般情况下都不能直接这样去做的，可以先多做一个层，一外面的那个层里直接写移动脚本！ 这样才是好的，

一般是不这样写，呵呵 ，谢谢你的建议

13 楼 hsys 2010-01-26  

zhengyutong 写道

很不错，不过我发现了一个问题。

在IE和FF中都会发生这样的情况，即鼠标移动速度稍快时，那个层就卡在某个地方不动了，然后你在层外松开鼠标。接着，鼠标再移到层上时，那个层又吸到鼠标上了，此时你的鼠标跟本没down，还是up的，这样你就可以移动鼠标而不是拖动便可以改变层的位置。

我没出现这个问题，谢谢你发现问题，但是我怎么移鼠标都没有出层，可以把鼠标的up事件写在document中，这样就好了吧，再次感谢

12 楼 寄生虫 2010-01-25  

搭车放个jQuery的吧

(function($){
  $.dragInit = function(c) {
    var trigger = c.trigger ? c.trigger : c.target;
		var target = c.target;
    if(!target)
      return;
    trigger.css('cursor', 'move');
		var d = $(document);
		trigger.mousedown(function(e){
			var positionX = e.clientX - target.offset().left;
			var positionY = e.clientY - target.offset().top;
			d.mousemove(function(e){
				target.css({
					position: 'absolute',
					left: e.clientX - positionX,
					top: e.clientY - positionY
				});
			});
			d.mouseup(function(){
				d.unbind('mousemove');
				d.unbind('mouseup');
			});
		});
  }
}(jQuery));

11 楼 yose 2010-01-25  

zhengyutong 写道

很不错，不过我发现了一个问题。

在IE和FF中都会发生这样的情况，即鼠标移动速度稍快时，那个层就卡在某个地方不动了，然后你在层外松开鼠标。接着，鼠标再移到层上时，那个层又吸到鼠标上了，此时你的鼠标跟本没down，还是up的，这样你就可以移动鼠标而不是拖动便可以改变层的位置。

10 楼 elvishehai 2010-01-25  

一般情况下都不能直接这样去做的，可以先多做一个层，一外面的那个层里直接写移动脚本！ 这样才是好的，

9 楼 zhengyutong 2010-01-25  

tom_cjp 写道

楼主 把down函数里的这句（e = e || window.event; //如果是IE）去掉， 但保留Move函数不变。 仍然支持ie, ff浏览器哦

好像不能去掉，我用IE5.5/6/7/8均做了测试，好像必须使用window.event，不可以去掉它。

8 楼 zhengyutong 2010-01-25  

很不错，不过我发现了一个问题。

在IE和FF中都会发生这样的情况，即鼠标移动速度稍快时，那个层就卡在某个地方不动了，然后你在层外松开鼠标。接着，鼠标再移到层上时，那个层又吸到鼠标上了，此时你的鼠标跟本没down，还是up的，这样你就可以移动鼠标而不是拖动便可以改变层的位置。

7 楼 tom_cjp 2010-01-24  

楼主 把down函数里的这句（e = e || window.event; //如果是IE）去掉， 但保留Move函数不变。 仍然支持ie, ff浏览器哦

6 楼 風一樣的男子 2010-01-24  

楼主，再加上边缘值判断更好，限制只在屏幕范围内移动

5 楼 beck5859509 2010-01-24  

试问拖动的时候浏览器是在实时的刷新那个DIV么，还是只有停下来的时候才重画DIV

4 楼 hsys 2010-01-23  

小刘而已 写道

我怎么没试出来啊．．．．．．．．．IE/FireFox/Opera都试过了，不行．

同时还要设置一下left和top，不然就得不到left和top，所以不行。

3 楼 hsys 2010-01-23  

小刘而已 写道

我怎么没试出来啊．．．．．．．．．IE/FireFox/Opera都试过了，不行．

不好意思  少了一个position: absolute;现在可以了

2 楼 hsys 2010-01-23  

小刘而已 写道

我怎么没试出来啊．．．．．．．．．IE/FireFox/Opera都试过了，不行．

怎么不行了？？我本地是可以的 ，在IE/FireFox下是可以兼容的，你有提示脚本错误吗？

1 楼 小刘而已 2010-01-22  

我怎么没试出来啊．．．．．．．．．IE/FireFox/Opera都试过了，不行．