总结:
通过jQuery和原生JS的拖拉写法,有以下总结。 1.假如获取div元素高宽。jQuery使用$("div").width();JS使用$("div")[0].offsetWidth/clientWidth/scrollWidth (1)scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。 (2)clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。 (3)offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。 (4)$("div").width():不包括边线 2.假如获取div元素左边距和上边局。jQuery使用$("div").offset.left/position().left。JS使用$("div")[0].offsetLeft (1)offset.left:获取元素距离窗口的偏移位 (2)position().left:获取元素距离定位元素的偏移位 (3)offsetLeft:获取元素距离定位元素的偏移位 即:jQuery中的position().left与JS中的offsetLeft效果相同,都是获取相对于定位元素的左边距 注意在设置边距的大小时:jQuery中,$("div").offset({left:10})可以, $("div").position({left:10})不可以,若想改变它距离定位元素的偏移位,用$("div").css({left:10px}) 3.JS中可以使用document.onmousemove,jQuery却不能使用$("document"),可用$("html")代替
JS实现表格拖拉
function dragFunction(header,table) {
var disX=0;
var disY=0;
//拖拉信息框函数
header.onmousedown=function (ev) {
var oEvent=ev||event; //为了浏览器的兼容
disX=oEvent.clientX-table.offsetLeft;//mousedown的时候获取鼠标的位置,并计算鼠标到div左边与上边的距离
disY=oEvent.clientY-table.offsetTop;
document.onmousemove=function (ev) { //为何是document的onmousemove,而不是div,是因为鼠标移的快的时候,离开了div,而就不会再执行这个函数,即鼠标移动得快,div就跟不了鼠标
var oEvent=ev||event;
var l=oEvent.clientX-disX; //mousemove的时候,将鼠标的位置减去点击的时候鼠标与div的距离来控制div跟着鼠标走
var t=oEvent.clientY-disY;
if(l<0) //防止div跑到页面外
{
l=0;
}
else if(l>document.documentElement.clientWidth-table.offsetWidth)
{
l=document.documentElement.clientWidth-table.offsetWidth;
}
if(t<0)
{
t=0;
}
else if (t>document.documentElement.clientHeight-table.offsetHeight)
{
t=document.documentElement.clientHeight-table.offsetHeight;
}
table.style.left=l+"px";
table.style.top=t+"px";
};
/*mouseup的时候,将mousemove和mousedown为null,为何是document而不是div,因为当鼠标移动到网
页上面的时候,被一块东西挡着了,这个时候此时up,并不会执行此函数,即,up后,div还不会停止
*/
document.onmouseup=function () {
document.onmousemove=null;
header.onmouseup=null;
}
};
}
jQuery实现表格的拖拉
dragFunction:function(header,table) {
var disX=0;
var disY=0;
header.mousedown(function (ev) {
console.log(table[0].offsetTop);
//为了浏览器的兼容
var oEvent=ev||event;
disX=oEvent.clientX-table.offset().left;
disY=oEvent.clientY-table.offset().top;
//为何是 $("html").mousemove而不是table.mousemove,因为鼠标移动过快的话,就会立刻table,造成move失效
$("html").mousemove(function (ev) {
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
//防止div跑到页面外
if(l<0)
{
l=0;
}
else if(l>$("body").width()-table.width())
{
l=$("body").width()-table.width();
}
if(t<0)
{
t=0;
}
else if (t>$("body").height()-table.height())
{
t=$("body").height()-table.height();
}
table.css({
left:l,
top:t
})
});
$("html").mouseup(function () {
$("html").off("mousemove");
$("html").off("mouseup");
})
})
}