`

纯javascript 拖拽 函数

JavaScript 拖拽
阅读更多

<%--
  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>

1
顶
4
踩
分享到：
| javascript 判断 类数组
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    比较精简的Javascript拖动效果函数代码

    比较精简的Javascript拖动效果函数代码

    javascript 拖动

    javascript 拖动函数 调用方法只需加个事件： (this,event)"&gt;&lt;/div&gt;

    JavaScript拖拽移动盒子.html

    JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的...

    JavaScript实现可拖拽的拖动层Div实例

    主要介绍了JavaScript实现可拖拽的拖动层Div的方法,拖拽页面中的div块可实现div块按照拖动轨迹移动的效果,涉及javascript鼠标事件、页面元素样式结合事件函数动态操作的相关技巧,需要的朋友可以参考下

    javascript实现的元素拖动函数宿主为浏览器

    主要介绍了javascript实现的元素拖动，将相应的元素对象的引用传到函数中

    javascript实现可拖动、可停靠标签

    // --InitDragableTag() 初始化可拖动标签样式 // | CreateTagClass() 构建一个Tag类,用于映射所有可移动标签的属性 // | OpenTag(TagId,Number) 展开标签 // | CloseTag(TagId,Number) 最小化标签 // | ...

    程序天下:JavaScript实例自学手册

    14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 ...

    纯Javascript的统计图形报表，带实例和详细的说明文档 Highcharts

    events 事件回调，支持addSeries方法，click方法，load方法，selection方法等的回调函数。 Color 颜色选项 Color颜色选项用于设置图表的颜色方案。 参数 描述 默认值 color 用于展示图表，折线/柱状/饼状等图...

    javascript表格可调整列宽(兼容firfox/IE)

    本demo使用jQuery包，实现表格列宽可拖拽功能，并实现页面reset时的重新布局。使用jQuery，方便函数的调用，给要处理的表格添加id 后，直接调用$("#id").movedTh()即可方便实现，修改了firfox的兼容性。

    《程序天下：JavaScript实例自学手册》光盘源码

    14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 ...

    JavaScript拖拽、碰撞、重力及弹性运动实例分析

    主要介绍了JavaScript拖拽、碰撞、重力及弹性运动实现方法,涉及JavaScript数学运算结合时间函数实现运动效果的相关技巧,需要的朋友可以参考下

    JavaScript实现拖拽网页内元素的方法

    本文实例讲述了JavaScript实现拖拽网页内元素的方法。分享给大家供大家参考。具体如下： 这段代码详细讲述了JS拖拽的原理和方法，值得学习和借鉴。 /** * 跨平台的事件监听函数 * @param {Node} node 需要监听事件...

    JavaScript函数节流和函数去抖知识点学习

    DOM 元素的拖拽功能实现（mousemove） 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹） 计算鼠标移动的距离（mousemove） Canvas 模拟画板功能（mousemove 搜索联想（keyup 监听滚动事件判断...

    JavaScript性能优化之函数节流（throttle）与函数去抖（debounce）

    函数节流，简单地讲，就是让一个函数无法在很短的时间间隔内连续调用，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用。 函数节流的原理挺简单的，估计大家都想到了，那就是定时器。当我...

    用Javascript设计通用日历控件及其与ASP的结合应用

    2.3 拖动选择 7 2.4 独立于页面存在 7 第三章 通用日历控件的结构 9 3.1 DateSelecterJs.js 9 3.1.1 基本功能模块 9 3.1.2 日历创建模块 9 3.1.3 日期选择模块 10 3.1.4 日期存取模块 10 3.1.5 美化效果模块 10 3.2...

    js实现html页面元素的拖动效果

    纯js实现html页面元素的拖拉功能，只需要给要拖动的html元素，加上指定的函数，就可实现元素的拖动。

    JavaScript计算器

    使用javascript全动态生成的计算器，调用内置eval函数能实现简单表达式的计算，js文件可以供其他程序在任意处调用动态生成计算器，本实例界面为浮动div可以在浏览器中显示，隐藏和任意拖动 (IE8 调试通过，其他...

    鼠标拖动特效

    鼠标拖动特效鼠标拖动特效鼠标拖动特效鼠标拖动特效鼠标拖动特效鼠标拖动特效鼠标拖动特效

Magicbox
Global site tag (gtag.js) - Google Analytics