`
lijiane
  • 浏览: 739 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

另类的拖拽

阅读更多
页面添加监听事件

if(dojo.isIE){
		dojo.connect(dijit.byId("selectedSelection"), "onMouseUp", doPSFieldSelect);
	}else{
		dojo.query("BODY").connect("onmouseup",dragAndDropBetweenSelector);
	}


判断鼠标是否移动到目标元素上

function dragAndDropBetweenSelector(ev){
    var target = ev.srcElement || ev.originalTarget;
    if ((!dojo.isIE && target.id !== "availableSelection" )||
        ( dojo.isIE && target.id !=="selectedSelection")){
        return;
    }
    var mousePos=getMousePosition(ev);
    var targPos=getSelectorPos("selectedSelection");
    var curTarget=dojo.byId("selectedSelection");
    var targWidth = parseInt(curTarget.offsetWidth,10); 
    var targHeight = parseInt(curTarget.offsetHeight,10); 
    if ((mousePos.x > targPos.x) && 
        (mousePos.x < (targPos.x + targWidth)) && 
        (mousePos.y > targPos.y) && 
        (mousePos.y < (targPos.y + targHeight))
        ) 
    { 
        // dragObject was dropped onto curTarget! 
        doPSFieldSelect();
    } 
}


判断元素位置

function getSelectorPos(elementId) {
    var ua = navigator.userAgent.toLowerCase();
    var isOpera = (ua.indexOf('opera') != -1);
    var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
    var el = document.getElementById(elementId);
    if(el.parentNode === null || el.style.display == 'none') 
    {
        return false;
    }
    var parent = null;
    var pos = [];
    var box;
    if(el.getBoundingClientRect)    //IE
    {
        box = el.getBoundingClientRect();
        var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
        var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
        return {x:box.left + scrollLeft, y:box.top + scrollTop};
    }
    else if(document.getBoxObjectFor)   // gecko
    {
        box = document.getBoxObjectFor(el);
        var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth,10):0;
        var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth,10):0;
        pos = [box.x - borderLeft, box.y - borderTop];
    }
    else    // safari & opera
    {
        pos = [el.offsetLeft, el.offsetTop];
        parent = el.offsetParent;
        if (parent != el) {
            while (parent) {
                pos[0] += parent.offsetLeft;
                pos[1] += parent.offsetTop;
                parent = parent.offsetParent;
            }
        }
        if (ua.indexOf('opera') !== -1 || ( ua.indexOf('safari') !== -1 && el.style.position === 'absolute' )) 
        {
                pos[0] -= document.body.offsetLeft;
                pos[1] -= document.body.offsetTop;
        } 
    }
    if (el.parentNode) { parent = el.parentNode; }
    else { parent = null; }
    while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') 
    { // account for any scrolled ancestors
        pos[0] -= parent.scrollLeft;
        pos[1] -= parent.scrollTop;
        if (parent.parentNode) { parent = parent.parentNode; } 
        else { parent = null; }
    }
    return {x:pos[0], y:pos[1]};
}


判断鼠标位置

function getMousePosition(ev){
    if(ev.pageX || ev.pageY){
        return {x:ev.pageX, y:ev.pageY};
    }
    return {
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y:ev.clientY + document.body.scrollTop  - document.body.clientTop
    };
}

分享到:
评论

相关推荐

    另类最小化miniMIZE

    "另类最小化miniMIZE"是一个创新的浏览器插件或工具,它的主要功能是让网页以极小的尺寸在桌面上显示,这样用户就可以同时打开并查看多个网页,而无需在窗口之间频繁切换。这一特性对于那些需要同时监控多个网页内容...

    易语言另类无标题栏窗口

    2. **事件处理**:开发者需要编写处理用户输入的代码,比如鼠标点击、拖动等,以便实现窗口的移动、缩放等功能。 3. **图形绘制**:为了实现无标题栏的视觉效果,可能需要自定义窗口的边框和背景,这部分代码会涉及...

    拖动小程序

    1. **另类其它**:这个标签可能意味着这个小程序采用了非传统或者创新的方法实现拖放功能,或者它的应用场景比较独特,不同于常规的小程序。 2. **控件**:在编程中,控件通常指的是用于构建用户界面的元素,如按钮...

    ps另类设计元素笔刷

    在Photoshop(简称PS)这个强大的图像处理软件中,"ps另类设计元素笔刷"是一种非常实用的设计工具。PS笔刷是设计师们用来增加图像创意、提升设计效率的重要手段。这些笔刷通常包含了各种独特形状和风格的元素,可以...

    易语言用标签取代图形按钮的另类办法

    易语言的设计理念是让编程更加直观、简单,它内置了多种控件,如标签、按钮等,用户可以通过拖拽和设置属性来构建程序界面。在这个“用标签取代图形按钮的另类办法”中,我们将探讨如何通过易语言实现这一创新设计。...

    另类方法实现对话框停靠

    "另类方法实现对话框停靠"这个主题就是关于如何在不使用标准MFC机制的情况下,通过自定义代码实现这一功能。 首先,我们理解一下MFC中的对话框和工具条停靠机制。MFC提供了CDialog和CDockablePane类来分别处理...

    计算机等考一级WPSOffice2003辅导:另类裁图技巧.docx

    本文介绍了在WPS Office 2003中进行另类裁图技巧,主要包括照片抠图和特殊形状裁剪。 1. **照片抠图** - 描边:首先,插入需要处理的照片,然后使用“连续曲线”工具沿着要保留的对象边缘绘制封闭曲线。如果需要更...

    Android WebView另类实现 自由复制进入选择文字模式

    在Android开发中,WebView是一个非常重要的组件,它允许我们在原生应用中展示网页内容,提供了一种混合式应用开发的解决方案。本篇文章将深入探讨如何在Android WebView中实现自由复制和选择文字的功能,这对于增强...

    Slider 滑块 vue Slider 滑块组件,双滑区间功能很其全,另类好用

    组件说明:setup ts 1、选中背景色 自由设置 直接给色值,或样试 color="#ff9900" color="fc-ff9900" ...2:拖动圆点大小,两种方式 size 当为Number 时就是 高+高/size 大小 当为size="10px" 就是固大10px大小

    拖动放大镜到密码输入框能得到密码的内容 COOL(15KB)

    从标签来看,“另类其它”可能意味着这不是常见的功能或实现方式,而是一种创新或者非标准的解决方案。“控件”指的可能是自定义的GUI(图形用户界面)组件,如这个放大镜工具。“源码”表明我们可以访问到实际的...

    易语言另类无标题栏窗口源码-易语言

    【易语言另类无标题栏窗口源码-易语言】是一个关于编程的进阶教程,主要涉及易语言的窗口设计技巧。易语言是中国自主研发的一种简单易学的编程语言,其设计理念是让编程变得简单,适合初学者和有一定基础的开发者。...

    腾讯日历源码

    此外,源码可能还包括了事件处理机制,如对用户点击、拖动等操作的响应,这需要用到MFC的消息映射机制。开发者会定义消息映射表(message map),并在对应的成员函数中处理各种窗口消息。 总的来说,这个腾讯日历...

    好用的flahs播放器(.swf播放器)

    综上所述,这款名为“SWF另类播放器”的软件是一个强大的SWF播放解决方案,具备播放列表、拖动控制和音频转换等高级功能,对于那些需要管理和欣赏SWF内容的用户来说,无疑是一个优秀的工具。它不仅方便用户浏览和...

    运行期间鼠标移动控件位置(一个简单的例子)

    在这里,可能是定义了可以拖动和调整大小的控件。 2. **RuntimeMoveResize.dpr**:Delphi的项目文件,包含了项目的入口点和整体配置。 3. **RuntimeMoveResize.exe**:可执行文件,是编译后的程序,可以直接运行。 4...

    Owner draw CTabCtrl with flat gripper property (40KB)

    平滑夹持器通常指的是在标签页上的一种设计元素,让用户能够拖动或调整控件的位置。这种设计使得用户界面更加现代化和易于交互。 标签"另类其它 控件 源码 资源"表明这个程序可能是对标准CTabCtrl控件的一种非传统...

    ofstar模板风格-+-蓝色幻想

    在“另类其它”这个标签下,我们可以理解到这个模板可能与常见的设计风格有所区别,具有一定的独特性和创新性,适合那些追求个性化展示的用户。"控件"标签暗示了该模板包含了一系列可交互的UI元素,如按钮、输入框、...

    仿IE工具栏、分割条、金额小写转大写函数等

    它在多面板的应用程序中非常常见,比如文本编辑器或数据查看器,用户可以通过拖动分割条来改变各个部分的显示空间。在编程中实现分割条,需要考虑响应用户的交互操作,确保界面的稳定性和流畅性。 “金额小写转大写...

    我写的一个XP样式的控件.rar

    标签中提到了“另类其它”,这意味着这个控件可能不是标准的、常见的控件类型,而是一种独特的实现或者有特定用途的控件。标签“控件”明确了这是与用户界面元素相关的代码。"源码"表明提供的是编程源代码,而非编译...

    Web中使用Fastreport在ActiveX调用打印例子

    Fastreport提供了一个可视化的报表设计界面,用户可以通过拖拽和设置属性来创建复杂的报表布局。它支持多种数据源,如数据库、XML等,并可以生成PDF、HTML、Excel等多种格式的报表。在Web应用中,Fastreport通常通过...

    企业信息监控管家 v1.0.zip

    另类的警告方式,另员工不尴尬,您也不尴尬! 并且有效提升员工的工作效率! 主机列表内显示以下信息: 编号、地址、名称、状态、通讯时间、Cpu使用率 内存使用率、网络流量使用率、最顶端窗口名称 主机列表内...

Global site tag (gtag.js) - Google Analytics