javascript drag()拖拽

DOCTYPE html >
< html lang = "en" >

< head >
< title > 事件类型 title >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< script src = "js/jquery.js" > < / script >
< style >
.div1 {
position : absolute ;
left : 100px ;
top : 100px ;
width : 250px ;
background-color : white ;
border : 1px solid gray ;
}
.div2 {
background-color : gray ;
border-bottom : 1px dotted black ;
padding : 3px ;
font-family : snas-serif;
font-weight : bold ;
}
< / style >
head >

< body >
< div class = "shipping_address" > div >
< form id = "shipping_address" > form >
< button id = "mybutton" > click me button >
< button id = "testButton" > click me again button >
< button id = "addBtn" onclick = "addBtn()" > add button >
< p class = "pNumber" > 0 p >
< div class = "div1" >
< div class = "div2" onmousedown = "drag(this.parentNode,event)" > 拖动我 div >
< p > 这是一个测试,这是一个测试, p >
div >


< script >
window . onload = function () {
// 查找一个form元素
var elt = document . getElementById ( "shipping_address" );
// 注册一个处理程序函数
elt . onsubmit = function () {
return validata ( this );
}
};
// addEventListener
var b = document . getElementById ( "mybutton" );
b . onclick = function () {
console . log ( "click" );
};
b . addEventListener ( "click" , function () {
console . log ( "hello world" );
}, false );
// 事件处理程序移除代码
// document.removeEventListener();
document . removeEventListener ( "mousemove" , function () {}, true );

// ie浏览器的事件处理
var b = document . getElementById ( "mybutton" );
var handler = function () {
console . log ( "ie事件处理程序" );
};
if ( b . addEventListener )
b . addEventListener ( "click" , handler, false );
else if ( b . attachEvent )
b . attachEvent ( "onclick" , handler);

//事件处理程序参数
function handler ( event ) {
event = event || window . event ;
//处理程序代码
}
//事件处理程序的运行环境
var e = document . getElementById ( "mybutton" );
e . onclick = function () {};


function addEvent ( target , type , handler ) {
if ( target . addEventListener )
target . addEventListener (type, handler, false );
else
target . attachEvent ( "on" + type, function ( event ) {
// 把处理程序作为事件目标的方法调用
// 传递事件对象
return handler . call (target, event );
});
};
var btn1 = document . getElementById ( "testButton" );
var type = "click" ;
var handler = function () {
console . log ( "the world is very beautiful" );
};
addEvent (btn1, type, handler);
// 事件处理程序的作用域
// 调用顺序:
// 事件取消preventDefault(),取消事件的默认操作;
function cancelHandler ( event ) {
// 用于ie
var event = event || window . event ;
//这里是处理事件的代码
if ( event . preventDefault ) event . preventDefault (); //标准技术
if ( event . returnValue ) event . returnValue = false ;
return false ;
};

// 文档加载事件
// 当文档准备就绪是调用函数
/*
*传递给whenReady(),当文档解析完毕且为操作准备就绪时
*函数将作为文档对象的方法调用
*DOMContentLoad readystatechange or load事件发生时会触发注册函数
*一旦文档准备就绪时,所有的函数都会被调用,任何传递给whenReady()的函数都将立即调用
*/
var whenReady = ( function () {
var funcs = [];
var ready = false ;

function handler ( e ) {
if (ready) return ;
if ( e . type === "readystatechange" && document . readyState !== "complete" )
return ;

for ( var i = 0 ; i < funcs . length ; i ++ )
funcs[i]. call ( document );
ready = true ;
funcs = null ;
};
if ( document . addEventListener ) {
document . addEventListener ( "DOMContentLoaded" , handler, false );
document . addEventListener ( "DOMContentLoaded" , handler, false );
window . addEventListener ( "load" , handler, false );
} else if ( document . attachEvent ) {
document . attachEvent ( "onreadystatechange" , handler);
window . attachEvent ( "onload" , handler);
};
return function whenReady ( f ) {
if (ready)
f . call ( document );
else
funcs . push (f);
}
}());

var number1 = 0 ;
var firstNumber = document . getElementsByClassName ( "pNumber" )[ 0 ];

function addBtn1 () {
number1 ++ ;
firstNumber . textContent = number1;
if ( firstNumber . textContent >= 11 ) {
number1 = 10 ;
alert ( "每天最多只能点10个赞" );
firstNumber . textContent = 10 ;
}
};
//拖动文档元素
// drag()函数,它用于mousedown事件处理程序的调用
//elementToDrag:接收mousedown事件的元素或其他某些包含元素,它必须是绝对定位的元素
// 它的style.left and style.top值随用户的拖动而改变
// function getScrollOffsets(e) {
// console.log([
// e.width,
// e.height
// ]);

// };
// var e = document.getElementById("img");
// // console.log(e);
// getScrollOffsets(e);





//查询窗口滚动条的位置
function getScrollOffsets ( w ) {
w = w || window ;
if ( w . pageXOffset != null )
return {
x : w . pageXOffset ,
y : w . pageYOffset
};
var d = w . document ;
if ( document . compatmode == "CSS1Compat" )
return {
x : d . documentElement . scrollLeft ,
y : d . documentElement . scrollTop
};
};

function drag ( elementToDrag , event ) {
// 初始鼠标的位置
var scroll = getScrollOffsets ();
var startX = event . clientX + scroll . x ;
var startY = event . clientY + scroll . y ;
// 在文档坐标下,待拖动元素的初始位置
// 因为elementToDrag是绝对定位的
// 所以假设它的offsetParen就是文档的body元素
var origX = elementToDrag . offsetLeft ;
var origY = elementToDrag . offsetTop ;
// 计算mousedown事件和元素左上角的距离
var deltaX = startX - origX;
var deltaY = startY - origY;
// 注册用于相应接着mousedown事件发生的mousemove和mouseup事件的事件处理程序
if ( document . addEventListener ) {
document . addEventListener ( "mousemove" , moveHandler, true );
document . addEventListener ( "mouseup" , upHandler, true );
} else if ( document . attachEvent ) {
elementToDrag . setCapture ();
elementToDrag . attachEvent ( "onmousemove" , moveHandler);
elementToDrag . attachEvent ( "onmouseup" , upHandler);
// 作为mouseup事件看待鼠标捕获的丢失
elementToDrag . attachEvent ( "onlosecapture" , upHandler);
};
// 我们处理这个事件,不让任何其他元素看到他
if ( event . stopPropagation ) {
event . stopPropagation ();
} else {
event . cancelBubble = true ;
};
// 现在阻止任何默认操作
if ( event . preventDefault ) {
event . preventDefault ();
} else {
event . returnValue = false ;
};
// 当元素正在被拖动是,它就是捕获mousemove事件的处理程序
// 它用于移动这个元素
function moveHandler ( e ) {
if ( ! e) {
e = window . event ;
};
var scroll = getScrollOffsets ();
elementToDrag . style . left = ( e . clientX + scroll . x - deltaX) + "px" ;
elementToDrag . style . top = ( e . clientY + scroll . y - deltaY) + "px" ;
if ( event . stopPropagation ) {
event . stopPropagation ();
} else {
event . cancelBubble = true ;
};
};
// 这里捕捉得失拖动结束时发生的最终mouseup事件的处理程序
function upHandler ( e ) {
if ( ! e) {
e = window . event ;
};
if ( document . removeEventListener ) {
document . removeEventListener ( "mouseup" , upHandler, true );
document . removeEventListener ( "mousemove" , moveHandler, true );
} else if ( document . detachEvent ) {
elementToDrag . detachEvent ( "onlosecapture" , upHandler);
elementToDrag . detachEvent ( "onmouseup" , upHandler);
elementToDrag . detachEvent ( "onmousemove" , moveHandler);
elementToDrag . repleaseCapture ();
}
if ( e . stopPropagation ) {
e . stopPropagation ();
} else {
e . cancelBubble = true ;
};
}
};
< / script >
body >

html >

你可能感兴趣的:(javascript drag()拖拽)