`

纯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拖拽框架

    JavaScript拖拽框架是一种用于创建交互式用户界面的技术，它允许用户通过鼠标或其他输入设备将元素在屏幕上自由移动，常用于构建可自定义的GUI组件、拖放功能等。本篇文章将详细探讨“简易而又灵活的Javascript拖拽...

    解析javascript 实用函数的使用详解

    在探讨JavaScript实用函数的使用时，我们通常会关注那些可以增强网页交互性和功能性的内置方法或自定义方法。接下来，我会详细解析给定文件中的几个关键JavaScript函数，这些函数在网页开发中非常实用。 首先是`add...

    可拖拽的谷歌样式纯javascript模态窗口插件

    本文将深入探讨“可拖拽的谷歌样式纯javascript模态窗口插件”的相关知识点。 首先，让我们了解什么是模态窗口。模态窗口（Modal Window）在网页上表现为一个覆盖在主页面上的半透明层，通常包含一些特定的信息或...

    javascript拖拽图片到指定位置

    在JavaScript和jQuery的世界里，实现图片拖放至指定位置的功能是一项常见的交互设计，它能够提升用户的体验，使得操作更加直观和便捷。以下我们将详细探讨如何使用这两种技术来完成这一任务。 首先，我们需要理解...

    JavaScript鼠标拖拽

    JavaScript鼠标拖拽功能是网页交互中的一个重要组成部分，它允许用户通过鼠标操作页面上的元素，例如移动、缩放或旋转对象。对于初学者来说，理解并实现这一功能是掌握JavaScript动态效果的一个重要步骤。 首先，...

    懒人原生JavaScript拖拽效果代码

    原生JavaScript拖拽效果是一种常见的用户界面功能，它可以增强网站的互动性和可用性。本文将深入探讨如何使用纯JavaScript实现一个简单、高效的拖拽功能，且无需依赖任何外部库。 首先，标题“懒人原生JavaScript...

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

    ### 比较精简的JavaScript拖动效果函数代码解析 在前端开发中，实现元素的拖动功能是一项常见的需求，特别是在构建交互式用户界面时。本文将详细解析一段用于实现简单拖动效果的JavaScript代码，并对其中的关键知识...

    javascript无刷新窗口，鼠标壳拖动窗口位置

    这个JavaScript文件可能包含了实现拖动功能的具体逻辑，包括添加事件监听器和处理拖动事件的函数。 8. **closes.png**： 这是一个图片资源，可能是关闭按钮的图标，用于用户关闭无刷新窗口。 总的来说，...

    一个基于纯JavaScript实现表格列拖动、排序的功能的js类库源码及例子

    "一个基于纯JavaScript实现表格列拖动、排序的功能的js类库源码及例子" 提供了一个解决方案，让开发者能够轻松地为他们的网页应用添加动态且用户友好的功能。这个类库专门针对表格数据展示，允许用户通过拖动列头来...

    完美的JavaScript拖拽效果－dbx

    "完美的JavaScript拖拽效果－dbx"是一个关于如何使用JavaScript创建流畅、用户友好的拖放功能的教学资源。在这个教程中，我们将深入探讨JavaScript拖拽效果的实现原理和技巧。 拖拽效果是现代网页设计中常见的一种...

    javascript拖动层类

    JavaScript拖动层类是一种在网页上实现元素动态拖放功能的技术。这种技术主要基于JavaScript语言，使得用户可以通过鼠标操作页面上的元素，就像在桌面上移动文件一样自由。它广泛应用于各种交互式应用，如对话框、...

    javascript 购物车(图片拖动)

    1. 监听鼠标事件：通过`addEventListener`函数监听`mousedown`（鼠标按下）、`mousemove`（鼠标移动）和`mouseup`（鼠标释放）事件，以跟踪用户的拖动行为。 2. 计算偏移量：当鼠标按下时，记录图片的初始位置和鼠标...

    javascript写的可拖动的iframe

    在本文中，我们将深入探讨如何使用JavaScript实现一个可拖动的iframe。JavaScript是一种强大的客户端脚本语言，常用于网页交互和动态效果的实现。在这个案例中，我们将关注于利用JavaScript来增强iframe的功能，使其...

    纯JavaScript智能缩放图片预览插件

    4. **图片加载**：在JavaScript中，可以使用`Image`对象预加载图片，一旦图片加载完成，可以触发回调函数，这时可以更新预览区域。 5. **图像缩放算法**：插件的核心在于智能缩放，这需要合适的算法来保持图像比例...

    Javascript实现网页元素拖拽排序

    在网页开发中，JavaScript是一种非常重要的脚本语言，它提供了丰富的功能，其中之一就是实现网页元素的拖拽排序。拖拽排序允许用户通过直观地拖动元素来改变它们在页面上的顺序，增强了用户体验。本文将深入探讨如何...

    原生javascript实现拖拽改变table表格行高（html）

    原生JavaScript实现的拖拽功能能够为用户带来直观、便捷的操作体验。在这个特定的场景中，我们关注的是如何使用JavaScript来实现拖拽改变HTML表格（table）的行高。标题提到的“原生javascript实现拖拽改变table表格...

    javascript可拖动的日历

    可以通过封装成函数或类，使得这个可拖动的日历组件能够方便地应用到其他项目中。 8. **兼容性处理**：由于浏览器之间的差异，需要考虑不同浏览器对JavaScript和CSS的支持情况，可能需要使用polyfill库或者条件语句...

    《kettle中使用javascript步骤和fireToDB函数实现自定义数据库查询 》代码

    2. **添加JavaScript步骤**：拖拽"脚本"步骤到画布上，并将其连接到数据源步骤。 3. **配置JavaScript步骤**： - 在"脚本"选项卡中，输入你的JavaScript代码，使用`fireToDB`执行数据库查询。 - 在"字段"选项卡中...

    Javascript实现DIV拖拽和添加

    本教程将详细讲解如何使用纯JavaScript实现这一功能，无需依赖任何外部库，如jQuery或类似的框架。 首先，我们需要创建一个可拖动的DIV元素。HTML代码可能如下所示： ```html ;height:100px;background-color:red;...

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