拖拽編程，java 鼠標拖拽_JavaScript DOM 鼠標拖拽

拖拽效果基于鼠標事件：mousedown、mousemove、mouseup

分別為鼠標按下、鼠標移動、鼠標松開

原理：鼠標按下時，添加鼠標移動、鼠標松開的事件處理函數，鼠標移動時獲取鼠標坐標，改變元素樣式，鼠標松開時清除鼠標移動和鼠標松開的事件處理函數

.box {

拖拽編程。position: absolute;

top: 0;

left: 0;

width: 100px;

height: 100px;

鼠標拖拽不靈敏怎么辦、background-color: red;

}

var box = document.getElementsByTagName('div')[0];

box.onmousedown = function (ev) {

var ev = ev || window.event,

前端拖拽自動生成java代碼、x = pagePos(ev).X - parseInt(getStyles(box)['left']),

y = pagePos(ev).Y - parseInt(getStyles(box)['top']);

document.onmousemove = function (ev) {

var ev = ev || window.event,

mPos = pagePos(ev);

js跟隨鼠標移動的div？box.style.left = mPos.X - x + 'px';

box.style.top = mPos.Y - y + 'px';

}

document.onmouseup = function () {

this.onmousemove = null;

js拖拽元素到另一個元素、this.onmouseup = null;

}

}

// 封裝的函數：獲取鼠標相對整個文檔的坐標

function pagePos(ev) {

js如何實現拖拽和上下移動？var sTop = getScrollOffset().top,

sLeft = getScrollOffset().left,

cTop = document.documentElement.clientTop || 0,

cLeft = document.documentElement.clientLeft || 0;

return {

js拖拽功能的實現、X: ev.clientX + sLeft - cLeft,

Y: ev.clientY + sTop - cTop

}

}

// 封裝的函數：獲取滾動條滾動距離

function getScrollOffset() {

if (window.pageXOffset) {

return {

top: window.pageYOffset,

left: window.pageXOffset

}

} else return {

top: document.body.scrollTop || document.documentElement.scrollTop,

left: document.body.scrollLeft || document.documentElement.scrollLeft

}

}

// 封裝的函數：獲取元素樣式的類數組

function getStyles(elem) {

if (window.getComputedStyle) {

return window.getComputedStyle(elem, null);

} else return elem.currentStyle;

}

封裝拖拽函數 var box = document.getElementsByTagName('div')[0];

elemDrag(box);

// 封裝的拖拽函數

function elemDrag(elem) {

var x,

y;

addEvent(elem, 'mousedown', function (ev) {

var ev = ev || window.event;

x = pagePos(ev).X - parseInt(getStyles(elem)['left']);

y = pagePos(ev).Y - parseInt(getStyles(elem)['top']);

addEvent(document, 'mousemove', mousemove);

addEvent(document, 'mouseup', mouseup);

cancelBubble(ev);

preventDefaultEvent(ev);

});

function mousemove(ev) {

var ev = ev || window.event;

elem.style.left = pagePos(ev).X - x + 'px';

elem.style.top = pagePos(ev).Y - y + 'px';

}

function mouseup(ev) {

var ev = ev || window.event;

removeEvent(document, 'mousemove', mousemove);

removeEvent(document, 'mouseup', mouseup);

}

}

// 綁定事件處理函數

function addEvent(elem, type, fn) {

if (elem.addEventListener) {

elem.addEventListener(type, fn);

} else if (elem.attachEvent) {

elem.attachEvent('on' + type, function (ev) {

fn.call(elem, ev); // call 兼容性比 bind 好

});

} else {

elem['on' + type] = fn;

}

}

// 解綁事件處理函數

function removeEvent(elem, type, fn) {

if (elem.addEventListener) {

elem.removeEventListener(type, fn);

} else if (elem.attachEvent) {

elem.detachEvent('on' + type, fn);

} else {

elem['on' + type] = null;

}

}

// 獲取鼠標在整個文檔中的坐標

function pagePos(ev) {

var sTop = getScrollOffset().top,

sLeft = getScrollOffset().left,

cTop = document.documentElement.clientTop || 0,

cLeft = document.documentElement.clientLeft || 0;

return {

X: ev.clientX + sLeft - cLeft,

Y: ev.clientY + sTop - cTop

}

}

// 獲取滾動條滾動距離

function getScrollOffset() {

if (window.pageXOffset) {

return {

top: window.pageYOffset,

left: window.pageXOffset

}

} else return {

top: document.body.scrollTop || document.documentElement.scrollTop,

left: document.body.scrollLeft || document.documentElement.scrollLeft

}

}

// 獲取元素樣式的類數組

function getStyles(elem) {

if (window.getComputedStyle) {

return window.getComputedStyle(elem, null);

} else return elem.currentStyle;

}

// 阻止冒泡

function cancelBubble(ev) {

if (ev.stopPropagation) {

ev.stopPropagation();

} else ev.cancelBubble = true; // 兼容 IE8 及以下

}

// 阻止默認事件

function preventDefaultEvent(ev) {

if (ev.preventDefault) {

ev.preventDefault();

} else ev.returnValue = false; // 兼容 IE8 及以下

}