鼠标事件:拖动文档元素

鼠标事件对象几个重要的属性：

clientX: 窗口坐标，加上垂直滚动可以得到文档纵坐标
clientY: 窗口坐标，加上水平滚动可以得到文档横坐标
altKey: boolean值，点击时是否按下了alt键
ctrlKey: boolean值，点击时是否按下了ctrl键
metaKey: boolean值，点击时是否按下了meta键
shiftKey: boolean值，点击时是否按下了shift键

button 点击时按下的是鼠标的哪个键（不同浏览器的赋值不同，不易使用）

收录拖动文档元素的js:

/**
 * 拖动绝对定位的HTML元素
 * 该方法依赖之前收集的getScrollOffset方法
 */
function drag( elementToDrag, event ){
    // 初始化鼠标位置，转换为文档坐标
    var scroll = getScrollOffset(),
        startX = event.clientX + scroll.x,
        startY = event.clientY + scroll,y,
        // 这里假设了elementToDrag的offsetParent是文档的body元素，似乎会有问题
        origX = elementToDrag.offsetLeft,
        origY = elementToDrag.offsetTop,
        deltaX = startX - origX,
        deltaY = startY - origY;

    if( document.addEventListener ){
        document.addEventListener( "mousemove", movehandler, true );
        document.addEventListener( "mouseup", upHandler, true );
    }else if( document.attachEvent ){
        // IE的事件模型中，捕获事件是通过调用元素上的setCapture()实现的
        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;

    function moveHandler( e ){
        if( !e ) e = window.event;
        var scroll = getScrollOffset();
        elementToDrag.style.left = ( e.clientX + scroll.x - deltaX ) + "px";
        elementToDrag.style.top = ( e.clientY + scroll.y -deltaY ) + "px";
        if( e.stopPropagation ) e.stopPropagation();
        else e.cancelBubble = true;
    }

    function upHandler( e ){
        if( !e ) e = window.event;
        if( document.removeEventListener ){
            document.removeEventListener( "mouseup", upHandler, true );
            document.removeEventListener( "mousemove", movehandler, true );
        }else if( document.attachEvent ){
            elementToDrag.detachEvent( "onlosecapture", upHandler );
            elementToDrag.detachEvent( "onmouseup", upHandler );
            elementToDrag.detachEvent( "onmousemove", movehandler );
            elementToDrag.releasecapture();
        }
        if( e.stopPropagation ) e.stopPropagation();
        else e.cancelBubble = true;
    }
}

调用：

<div style="position:absolute;left:120px;top:150px;width:250px; border:1px solid black;">
    <div style="background-color:#416ea5; width:250px;height:22px;cursor:move;font-weight:bold;    border-bottom:1px solid black;" onmousedown="drag(this.parentNode, event);">可拖动标题</div>
    <p>可被拖动的窗口</p>
    <p>窗口内容</p>
</div>

<img src="image/logo.jpg" alt="按住Shift可拖动"  style="position:absolute;"
 onmousedοwn="if (event.shiftKey) drag(this, event);" />

来源：https://www.cnblogs.com/springsnow/p/12367108.html

标签

event

scroll