Jquery封装之拖拽解决遇到的一些小bug

第一个问题：低版本火狐在空的div 拖拽的时候，有个bug，会拖段掉并且无法拖动，

这个问题是火狐的默认行为，我们只需要取消这个默认行为即可解除这个bug。

//阻止默认行为

function preDef(event) {

var e = getEvent(event);

if (typeof e.preventDefault != 'undefined') {

e.preventDefault();

} else {

e.returnValue = false;

}

}

第二个问题：弹出窗口被拖出浏览器的边缘会导致很多问题，比如出现滚动条，出现空

白等，不利于输入等。所以，我们需要将其规定在可见的区域。

//设置不得超过浏览器边缘

document.onmousemove = function (e) {

var e = getEvent(e);

var left = e.clientX - diffX;

var top = e.clientY - diffY;

if (left < 0) {

left = 0;

} else if (left > getInner().width - _this.offsetWidth) {

left = getInner().width - _this.offsetWidth;

}

if (top < 0) {

top = 0;

} else if (top > getInner().height - _this.offsetHeight) {

top = getInner().height - _this.offsetHeight;

}

_this.style.left = left + 'px';

_this.style.top = top + 'px';

}

第三个问题：IE 浏览器在拖出浏览器外部的时候，还是会出现空白。这个bug 是IE 独

有的，所以我们需要禁止这种行为。

IE 浏览器有两个独有的方法：setCapture、releaseCapture，这两个方法，可以让鼠标滑

动到浏览器外部也可以捕获到事件，而我们的bug 就是当鼠标移出浏览器的时候，限制超过

的功能就失效了。用这个方法，即可解决这个问题。

//鼠标锁住时触发(点击住)

if (_this.setCapture) {

_this.setCapture();

}

//鼠标释放时触发(放开鼠标)

if (_this.releaseCapture) {

_this.releaseCapture();

}

第四个问题：当我们改变浏览器大小的时候，弹窗会自动水平垂直居中，而使用了拖拽

效果后，改变浏览器大小，还是会水平居中，这样的用户体验就不是很好了，我们需要的是

等当拖到哪里，就是哪里，但拖放到右下角，然后又缩放时，还能全部显示出来。

var element = this.elements[i];

window.onresize = function () {

if (element.offsetLeft > getInner().width - element.offsetWidth) {

element.style.left = getInner().width - element.offsetWidth+"px";

}

if (element.offsetTop > getInner().height - element.offsetHeight) {

element.style.top = getInner().height - element.offsetHeight+"px";

}

};