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 >