纯javascript 拖拽函数

最新推荐文章于 2022-04-19 15:32:31 发布

尹彬

最新推荐文章于 2022-04-19 15:32:31 发布

阅读量103

点赞数

分类专栏： javascript《原创》文章标签： JavaScript 拖拽

javascript《原创》专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<%--
Created by IntelliJ IDEA.
User: yinbin
Date: 2011-8-13
Time: 16:00:30
To change this template use File | Settings | File Templates.

现在只是个基本的函数，只实现了拖拽（move或者是copy一个或者是可以拽如同一个元素多次）到目标元素的基本操作，例子给的是绝对定位，相对定位的元素应该也能兼容。
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Simple jsp page</title>

<style type="text/css">

/**

css网上找的
        **/
    div.window {
    /* Specifies size and border of the window */
        position: absolute; /* The position is specified elsewhere */
        width: 190px;
        height: 100px; /* Window size, not including borders */
        border: 3px outset gray; /* Note 3D "outset" border effect */
    }

    div.titlebar {
    /* Specifies position, size, and style of the titlebar */
        position: absolute; /* It's a positioned element */
        top: 0px;
        height: 18px; /* Titlebar is 16px + padding and borders */
        width: 180px; /* 290 + 5px padding on left and right = 300 */
        background-color: #aaa; /* Titlebar color */
        border-bottom: groove gray 2px; /* Titlebar has border on bottom only */
        padding: 3px 5px 2px 5px; /* Values clockwise: top, right, bottom, left */
        font: bold 11pt sans-serif; /* Title font */
        cursor: move;
    }

    div.content {
    /* Specifies size, position and scrolling for window content */
        position: absolute; /* It's a positioned element */
        top: 25px; /* 18px title+2px border+3px+2px padding */
        height: 65px; /* 200px total - 25px titlebar - 10px padding*/
        width: 180px; /* 300px width - 10px of padding */
        padding: 5px; /* Allow space on all four sides */
        overflow: auto; /* Give us scrollbars if we need them */
        background-color: #ffffff; /* White background by default */
    }

    div.translucent {
    /* this class makes a window partially transparent */
        opacity: .45; /* Standard style for transparency */
        -moz-opacity: .45; /* Transparency for older Mozillas */
        filter: alpha(opacity = 45); /* Transparency for IE */
    }

</style>
<%--<script type="text/javascript" src="index.js">--%>
<%--</script>--%>
<script type="text/javascript">

//》》》》》》》》》》》》》》》》》》》》》》》》》》》》事件封装开始
var EventHandler = {};

if (document.addEventListener) {

    EventHandler.add = function(element, eventType, handler) {
        element.addEventListener(eventType, handler, false);
    };
    EventHandler.remove = function(element, eventType, handler) {
        element.removeEventListener(eventType, handler, false);
    };

} else if (document.attachEvent) {

    EventHandler.add = function(element, eventType, handler) {
        if (EventHandler._find(element, eventType, handler) != -1)return;

        //包装用户自己定义的事件处理函数，使其更加接近标准2级事件模型
        var warpedHandler = function(e) {
            if (!e)e = window.event;

            var event = {
                _event:e,
                type:e.type,
                target:e.srcElement,
                currentTarget:element,
                relatedTarget:e.fromElement ? e.fromElement : e.toElement,
                eventPahse:(e.srcElement == element) ? 2 : 3,

                clientX:e.clientX,
                clientY:e.clientY,
                screenX:e.screenX,
                screenY:e.screenY,

                altKey:e.altKey,
                ctrlKey:e.ctrlKey,
                shiftKey:e.shiftKey,
                charCode:e.keyCode,

                stopPropagation:function() {
                    e.cancelBubble = true;
                },
                preventDefault:function() {
                    e.returnValue = false;
                }
            };

            if (Function.prototype.call) {
                handler.call(element, event);
            } else {
                element._currentHandler = handler;
                element._currentHandler(event);
                element._currentHandler = null;
            }
        };

        element.attachEvent('on' + eventType, warpedHandler);

        var storeH = {
            element:element,
            eventType:eventType,
            handler:handler,
            warpedHandler:warpedHandler
        };

        // if element==window else
        var d = element.document || element;
        var w = d.parentWindow;

        var id = EventHandler._uid();

        if (!w._allHandlers)w._allHandlers = {};
        w._allHandlers[id] = storeH;

        if (!element._handlers)element._handlers = [];
        element._handlers.push(id);

        if (!w._onunloadHandlerRegistered) {
            w._onunloadHandlerRegistered = true;
            w.attachEvent('onunload', EventHandler._removeAllHandler)
        }
    };

    EventHandler.remove = function(element, eventType, handler) {
        var i = EventHandler._find(element, eventType, handler);
        if (i == -1)return;

        var d = element.document || element;
        var w = d.parentWindow;

        var handlerId = element._handlers[i];
        var storeH = w._allHandlers[handlerId];

        element.detachEvent('on' + eventType, storeH.warpedHandler);

        element._handlers.splice(i, 1);
        delete w._allHandlers[handlerId];
    };

}

EventHandler._find = function(element, eventType, handler) {
    var handlers = element._handlers;
    if (!handlers)return -1;

    var d = element.document || element;
    var w = d.parentWindow;

    for (var i = 0; i < handlers.length; i++) {
        var storeH = w._allHandlers[handlers[i]];
        if (storeH.eventType == eventType && storeH.handler == handler)
            return i;
    }
    return -1;
};

EventHandler._removeAllHandler = function() {
    var w = this;

    for (var id in w._allHandlers) {
        var h = w._allHandlers[id];
        h.element.detachEvent('on' + h.eventType, h.handler);
        delete w._allHandlers[id];
    }
};

EventHandler._counter = 0;
//返回一个唯一值
EventHandler._uid = function() {
    return 'h' + this._counter++;
};

//---------------test-----------------
//---------------test-----------------

//EventHandler.add(window, 'load', loadHandler);

function loadHandler() {

    var test = document.createElement('input');
    test.setAttribute('value', 'clickMe!');
    test.setAttribute('type', 'button');
    var text = document.createTextNode('测试通用event函数:');
    document.body.appendChild(text);
    document.body.appendChild(test);

    EventHandler.add(test, 'click', testClick);
    EventHandler.add(test, 'click', testClick);
    EventHandler.add(test, 'click', testClick);
}

function testClick(event) {
    alert(this.nodeType);
    alert(event.type);
}
//》》》》》》》》》》》》》》》》》》》》》》》》》》》》事件封装结束

//==========================================================================================================
//==========================================================================================================
//==========================================================================================================
//==========================================================================================================

//》》》》》》》》》》》》》》》》》》》》》》》》》》》》拖拽封装开始
/**
*
* @param element 拖拽源元素    ，此元素必须有一个 id=titlebarDiv的div子元素作为title bar
* @param content 目标元素：一个div
* @param event event对象
* @param moveOrCopy true表示move，false表示copy
* @param canCopyMultiplicity true表示可以多次copy
* @param isFailed 表示如果没有移动如目标元素，则是否取消，true表示取消，false
*/
function drag_clone_to(element, content, event, moveOrCopy, canCopyMultiplicity, isFailed) {
    if (!element || element.nodeType != 1)return;
    if (!content || content.nodeType != 1)return;
    if (null == moveOrCopy)moveOrCopy = true;
    if (null == isFailed)isFailed = true;
    if (null == canCopyMultiplicity)canCopyMultiplicity = false;

    //取消事件传播和默认行为
    event.stopPropagation();
    event.preventDefault();

    //clone
    var ele = element.cloneNode(true);
    //这里可以修改一下，使得可以拖拽相对定位的元素
    ele.style.position = 'absolute';
    ele._oldElement = element;
    try {                  //not ie
        ele.childNodes.item(3).setAttribute('class', 'translucent content');
    } catch(e) {       //ie
        ele.childNodes.item(1).setAttribute('class', 'translucent content');
    }
    document.body.appendChild(ele);

    //    注册mousemove事件
    EventHandler.add(document, 'mousemove', mouseMoveHandler);

    //    注册mouseup事件
    EventHandler.add(ele, 'mouseup', mouseUpHandler);

    //    鼠标相对于拖拽元素左上角的位置
    var offsetX = event.clientX - element.offsetLeft;
    var offsetY = event.clientY - element.offsetTop;

    //    content,接受拖拽的元素
    var contentX = content.offsetLeft;
    var contentY = content.offsetTop;
    var contentWidth = 0,contentHeight = 0;
    if (content.currentStyle) {
        contentWidth = Math.floor(parseInt(content.currentStyle.width));
        contentHeight = Math.floor(parseInt(content.currentStyle.height));
    }
    if (window.getComputedStyle) {
        contentWidth = Math.floor(parseInt(window.getComputedStyle(content, null).width));
        contentHeight = Math.floor(parseInt(window.getComputedStyle(content, null).height));
    }
    var eleWidth = 0,eleHeight = 0;
    if (ele.currentStyle) {
        eleWidth = Math.floor(parseInt(ele.currentStyle.width) / 2);
        eleHeight = Math.floor(parseInt(ele.currentStyle.height) / 2);
    }
    if (window.getComputedStyle) {
        eleWidth = Math.floor(parseInt(window.getComputedStyle(ele, null).width) / 2);
        eleHeight = Math.floor(parseInt(window.getComputedStyle(ele, null).height) / 2);
    }
    var contentXX = contentX + contentWidth,contentYY = contentY + contentHeight;
    var old_border = content.style.border;

    function mouseMoveHandler(e) {

        var eleX = ele.offsetLeft;
        var eleY = ele.offsetTop;
        var x = eleX + eleWidth,y = eleY + eleHeight;
        if (x > contentX && y > contentY && x < contentXX && y < contentYY) {
            content.style.border = 'solid 2px #ccfffd';
        } else {
            content.style.border = old_border;
        }

        ele.style.left = (e.clientX - offsetX) + 'px';
        ele.style.top = (e.clientY - offsetY) + 'px';

        e.stopPropagation();
        e.preventDefault();
    }

    function mouseUpHandler(e) {
        if (!canCopyMultiplicity) {
            EventHandler.remove(document, 'mousemove', mouseMoveHandler);
            EventHandler.remove(ele, 'mouseup', mouseUpHandler);
        }

        var eleX = ele.offsetLeft;
        var eleY = ele.offsetTop;
        var x = eleX + eleWidth,y = eleY + eleHeight;
        if (x > contentX && y > contentY && x < contentXX && y < contentYY) {
            if (moveOrCopy) {//move
                element.style.position = 'relative';
                element.style.left = 4;
                element.style.top = 3;
                var titlebarDiv = document.getElementById('titlebarDiv');
                titlebarDiv.style.cursor = 'default';
                EventHandler.remove(titlebarDiv, 'mousedown', mouseDownHandler);
            } else {//copy
                var copyE = element.cloneNode(true);
                copyE.style.position = 'relative';
                copyE.style.left = 4;
                copyE.style.top = 3;
                copyE.style.cursor = 'default';
                var titlebarDiv = document.getElementById('titlebarDiv');
                if (!canCopyMultiplicity) {//如果不可以多次拖拽
                    titlebarDiv.style.cursor = 'default';
                    EventHandler.remove(titlebarDiv, 'mousedown', mouseDownHandler);
                }
                content.appendChild(copyE);
            }
        }
        if (isFailed)
            document.body.removeChild(ele);

        content.style.border = old_border;
        //        ele = null;    ie 通过不了，所以现在只能暂时注释了

        e.stopPropagation();
        e.preventDefault();
    }

}

//》》》》》》》》》》》》》》》》》》》》》》》》》》》》拖拽封装结束

//--------------拖拽测试----------------
EventHandler.add(window, 'load', function() {

    EventHandler.add(document.getElementById('titlebarDiv'), 'mousedown', mouseDownHandler);

});
function mouseDownHandler(event) {
    drag_clone_to(this.parentNode, document.getElementById('targetDiv'), event, false, true);
}

</script>
</head>
<body>


<div style="left: 75px; top: 110px; z-index: 20;" class="window">
    <div class="titlebar" id="titlebarDiv">Another Window</div>
    <div style="background-color:#d0d0d0; font-weight:bold;" class="content">
        This is another window
    </div>
</div>

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>


<div id="targetDiv" style="background-color:#f5f5dc;width:800px;height:400px;border:1px black solid">
</div>
</body>
</html>

尹彬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯javascript 拖拽函数

&lt;%-- Created by IntelliJ IDEA. User: yinbin Date: 2011-8-13 Time: 16:00:30 To change this template use File | Settings | File Templates. 现在只是个基本的函数，只实现了拖拽（move或者是copy一个或者是可以拽如同一个元素...
复制链接

扫一扫