怎么拖动文档的位置

在做WEB UI设计的时候，拖动某个HTML元素已经成为一种不能忽视的用户界面模式，比较典型的应用例子就是Dialog，一个元素是怎么实现拖动的呢？其实原理非常简单，要想实现首先得了解几个基本知识。

Tips

绝对定位：只有把元素的position属性设置为absolute并且或者fixed才可以实现拖动，默认情况下元素会按文档流中的位置自行决定其出现在页面上的位置，是不能移动的，而绝对定位的元素可以使元素脱离文档流，相对于其定位的父元素或者屏幕定位，可以利用这点儿，通过改变元素与已定位父元素的位移来实现元素拖动。关于定位知识具体可以看看CSS布局 ——从display，position， float属性谈起。

鼠标事件：当鼠标按下、移动、弹起的时候都会触发相应事件，当鼠标按下的时候同时会触发相应元素click事件，并且冒泡到document，上面提到改变元素与定位父容器位移可以在这些事件中实现。关于事件相关知识可以看看JavaScript与HTML交互——事件

要拖动的Dialog

写个简易的Dialog供拖动测试使用

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style type="text/css" >
            html,body
            {
                height:100%;
                width:100%;
                padding:0;
                margin:0;
            }
            
            .dialog
            {
                width:250px;
                height:250px;
                position:absolute;
                background-color:#ccc;
                -webkit-box-shadow:1px 1px 3px #292929;
                -moz-box-shadow:1px 1px 3px #292929;
                box-shadow:1px 1px 3px #292929;
                margin:10px;
            }
            
            .dialog-title
            {
                color:#fff;
                background-color:#404040;
                font-size:12pt;
                font-weight:bold;
                padding:4px 6px;
                cursor:move;
            }
            
            .dialog-content
            {
                padding:4px;
            }
        </style>
    </head>
    <body>
        <div id="dlgTest" class="dialog">
            <div class="dialog-title">Dialog</div>
            <div class="dialog-content">
                This is a draggable test.
            </div>
        </div>
    </body>
</html>

看起来是酱紫的

拖动一下

为了简单，这里就不照顾浏览器兼容性问题了，先基于Chrome实现。上面的Dialog定位夫容器为document，鼠标event对象包含clientX和clientY两个属性，标识鼠标当前相对ViewPort（可视窗口）位置，可以在移动的时候改变Dialog的left和top属性值实现其移动。

var isDialogTitle=false;
            
            function down(e){
                if(e.target.className.indexOf('dialog-title')!=-1){
                    isDialogTitle=true;
                }
            }
            
            function move(e){
                var dialog=document.getElementById('dlgTest');
                if(isDialogTitle){//只有点击Dialog Title的时候才能拖动
                    dialog.style.left=e.clientX+'px';
                    dialog.style.top=e.clientY+'px';
                }
            }
            
            function up(e){
                isDialogTitle=false;
            }
            
            document.addEventListener('mousedown',down);
            document.addEventListener('mousemove',move);
            document.addEventListener('mouseup',up);

这样拖动效果就实现了，为了确保只有鼠标点击Dialog Title的时候才拖动，当鼠标按下的时候要判断事件源，如果是Dialog Title区域的话，把isDialogTitle标记设为true，鼠标移动的时候首先要判断isDialogTitle，在鼠标弹起的时候将标记设为false。

一跳一跳的

亲自试过demo的同学肯定可以当开始移动的时候Dialog会跳一下，这是怎么个情况？仔细看看代码发现在移动初始，代码就把Dialog的left和top设为了鼠标当前位置，可是用户在拖动的时候不会刻意去点Dialog的左上角，这样就跳了，soga！改进一下

var draggingObj=null; //dragging Dialog
            var diffX=0;
            var diffY=0;
            
            function down(e){
                if(e.target.className.indexOf('dialog-title')!=-1){
                    draggingObj=e.target.offsetParent;
                    diffX=event.clientX-draggingObj.offsetLeft;
                    diffY=event.clientY-draggingObj.offsetTop;
                }
            }
            
            function move(e){
                var dialog=document.getElementById('dlgTest');
                if(draggingObj){//只有点击Dialog Title的时候才能拖动
                    dialog.style.left=(e.clientX-diffX)+'px';
                    dialog.style.top=(e.clientY-diffY)+'px';
                }
            }
            
            function up(e){
                draggingObj=null;
                diffX=0;
                diffY=0;
            }
            
            document.addEventListener('mousedown',down);
            document.addEventListener('mousemove',move);
            document.addEventListener('mouseup',up);

好赤果果

经过改动后不再跳跃了，但是很暴露的感觉，最开始定义的三个变量都暴露在window下，而且这种写法相当的没有通用性，万一以后Dialog Title变了呢，凡是用过此方法的地方都得改一遍，万一Title内部还有子元素，点击其子元素的时候怎么办？既然如此，穿件衣服封装一下

var Dragging=function(validateHandler){ //参数为验证点击区域是否为可移动区域，如果是返回欲移动元素，负责返回null
                var draggingObj=null; //dragging Dialog
                var diffX=0;
                var diffY=0;
                
                function mouseHandler(e){
                    switch(e.type){
                        case 'mousedown':
                            draggingObj=validateHandler(e);//验证是否为可点击移动区域
                            if(draggingObj!=null){
                                diffX=e.clientX-draggingObj.offsetLeft;
                                diffY=e.clientY-draggingObj.offsetTop;
                            }
                            break;
                        
                        case 'mousemove':
                            if(draggingObj){
                                draggingObj.style.left=(e.clientX-diffX)+'px';
                                draggingObj.style.top=(e.clientY-diffY)+'px';
                            }
                            break;
                        
                        case 'mouseup':
                            draggingObj =null;
                            diffX=0;
                            diffY=0;
                            break;
                    }
                };
                
                return {
                    enable:function(){
                        document.addEventListener('mousedown',mouseHandler);
                        document.addEventListener('mousemove',mouseHandler);
                        document.addEventListener('mouseup',mouseHandler);
                    },
                    disable:function(){
                        document.removeEventListener('mousedown',mouseHandler);
                        document.removeEventListener('mousemove',mouseHandler);
                        document.removeEventListener('mouseup',mouseHandler);
                    }
                }
            }

包装一下果真变好看多了，代码不难看懂，有几个注意点，Dragging函数的validateHandler参数并不是什么阿猫阿狗，正如注释所言为了解决刚才提到几个需求变更问题，validateHandler是一个自定义函数的句柄，这个函数用于识别点击元素是否触发移动，是的话需要返回欲移动元素，这样就可以灵活的触发移动并决定移动那个元素了（点击的和移动的不一定是一个），Dragging函数返回一个对象，对象中有两个方法，分别可以使元素可移动/禁止移动，看看怎么使用

function getDraggingDialog(e){
                var target=e.target;
                while(target && target.className.indexOf('dialog-title')==-1){
                    target=target.offsetParent;
                }
                if(target!=null){
                    return target.offsetParent;
                }else{
                    return null;
                }
            }

            
            Dragging(getDraggingDialog).enable();

首先定义一个识别函数，然后作为参数调用Dragging函数，并调用返回值的enable方法，这样元素就可以拖动了。

源码

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style type="text/css" >
            html,body
            {
                height:100%;
                width:100%;
                padding:0;
                margin:0;
            }
            
            .dialog
            {
                width:250px;
                height:250px;
                position:absolute;
                background-color:#ccc;
                -webkit-box-shadow:1px 1px 3px #292929;
                -moz-box-shadow:1px 1px 3px #292929;
                box-shadow:1px 1px 3px #292929;
                margin:10px;
            }
            
            .dialog-title
            {
                color:#fff;
                background-color:#404040;
                font-size:12pt;
                font-weight:bold;
                padding:4px 6px;
                cursor:move;
            }
            
            .dialog-content
            {
                padding:4px;
            }
        </style>
    </head>
    <body>
        <div id="dlgTest" class="dialog">
            <div class="dialog-title">Dialog</div>
            <div class="dialog-content">
                This is a draggable test.
            </div>
        </div>
        <script type="text/javascript">
            var Dragging=function(validateHandler){ //参数为验证点击区域是否为可移动区域，如果是返回欲移动元素，负责返回null
                var draggingObj=null; //dragging Dialog
                var diffX=0;
                var diffY=0;
                
                function mouseHandler(e){
                    switch(e.type){
                        case 'mousedown':
                            draggingObj=validateHandler(e);//验证是否为可点击移动区域
                            if(draggingObj!=null){
                                diffX=e.clientX-draggingObj.offsetLeft;
                                diffY=e.clientY-draggingObj.offsetTop;
                            }
                            break;
                        
                        case 'mousemove':
                            if(draggingObj){
                                draggingObj.style.left=(e.clientX-diffX)+'px';
                                draggingObj.style.top=(e.clientY-diffY)+'px';
                            }
                            break;
                        
                        case 'mouseup':
                            draggingObj =null;
                            diffX=0;
                            diffY=0;
                            break;
                    }
                };
                
                return {
                    enable:function(){
                        document.addEventListener('mousedown',mouseHandler);
                        document.addEventListener('mousemove',mouseHandler);
                        document.addEventListener('mouseup',mouseHandler);
                    },
                    disable:function(){
                        document.removeEventListener('mousedown',mouseHandler);
                        document.removeEventListener('mousemove',mouseHandler);
                        document.removeEventListener('mouseup',mouseHandler);
                    }
                }
            }

            function getDraggingDialog(e){
                var target=e.target;
                while(target && target.className.indexOf('dialog-title')==-1){
                    target=target.offsetParent;
                }
                if(target!=null){
                    return target.offsetParent;
                }else{
                    return null;
                }
            }
            
            Dragging(getDraggingDialog).enable();
        </script>
    </body>
</html>

不足之处

这种拖动处理方式看起来不错了，但是还有几点儿遗憾

1. 前面提到的浏览器兼容性问题，这种写法在低版本IE浏览器上是不能运行的

2. 边界检查，细心的同学发现Dialog不但可以拖动了，还可以使页面出现滚动条无限拖动，大部分情况下我们希望Dialog在可视窗口、文档（固有滚动条内）或者固定区域内拖动，这种方式没有做到此限制

3. 拖动卡顿，在这个demo中不会出现此问题，文档结构简单拖动流畅，可视在庞大的页面中如果鼠标移动速度过快，Dialog会跟不上鼠标，出现卡顿，这时候如果鼠标在Dialog外面，mouseup事件不会生效，拖动就停不下来，只能把鼠标移回Dialog在mouseup

前两个问题好解决，拓展一下模块就可以，至于第三个现在还没想到比较好的解决办法，十一点了，明天再研究研究，然后一块儿发出来，晚安。

本文转自魏琼东博客园博客，原文链接：http://www.cnblogs.com/dolphinX/p/3290520.html，如需转载请自行联系原作者

　　为了完成面向对象的课程设计，我最近开始正式学习VC++。在学习单文档应用窗口切分的例程时，我发现用鼠标拖动切分条可以改变切分窗口的比例。我的课程设计中可不需要这样的效果。怎么才能让它固定呢？在网上搜了一下，发现大部分文章都是在粗略介绍用CSplitterWnd切分窗口的，没有详细说明怎样固定窗片的；还有一部分是在论坛里求助这个问题的帖子，回答也不是太明了。最后终于让我找到了一篇对我有帮助的文章：使用VC6.0实现窗口的任意分割它里面提到“锁定切分条的最简单的方法莫过于不让CSplitterWnd来处理WM_LBUTTONDOWN,WM_MOUSEMOVE,WM_SETCURSOR消息，而是将这些消息交给CWnd窗口进行处理”，由此我想到了下面的解决为法。下面我就把我做的这个例子中关于窗口切分的内容从头到尾介绍一下，希望对那些像我一样刚学VC++的人会有启示。如果您有更好的方法，或者说我这个方法不好，也请您告诉我。谢谢。
　　对了，再补充一句：我用的是VS.NET2003。

　　目的效果：把一个单文档应用程序的窗口拆分成左右两个，左边的视图基类为CWnd，右边的视图基类为CDialog，中间的切分条固定不可动。

　　步骤：
　　①创建一个“单文档”应用程序，“用户界面功能”中选择“拆分窗口”。
　　②添加一个MFC类CRightView，基类选择CFormView。
　　③编辑资源IDD_RIGHTVIEW。
　　④把MainFrm.cpp中的OnCreateClient函数体用下述内容替换：

　　{
　　    //创建静态切分窗口
   if (!m_wndSplitter.CreateStatic(this, 1, 2))
   {
               return FALSE;
            }

            //创建左边的pane
            if (!m_wndSplitter.CreateView(0, 0, pContext->m_pNewViewClass, CSize(400, 0), pContext))
            {
                return FALSE;
            }
            //创建右边的pane
            if (!m_wndSplitter.CreateView(0, 1, RUNTIME_CLASS(CRightView), CSize(0, 0), pContext))
            {
                return FALSE;
            }

            return TRUE;
　　}

　　此时已经达到了对窗口切分的目的。编译运行即可看到效果。下面实现切分条的固定。

　　⑤添加一个“一般C++类”CFixedSplitterWnd，基类填写CSplitterWnd。
　　⑥用这个类来响应WM_LBUTTONDOWN消息，把CFixedSplitterWnd::OnLButtonDown(...)函数中的CSplitterWnd::OnLButtonDown(...)改成CWnd::OnLButtonDown(...)。
　　⑦用这个类来响应WM_MOUSEMOVE消息，把CFixedSplitterWnd::OnMouseMove(...)函数中的CSplitterWnd::OnMouseMove(...)改成CWnd::OnMouseMove(...)。
　　其实上述两步的目的就是让CSplitterWnd类不响应WM_LBUTTONDOWN和WM_MOUSEMOVE消息。
　　⑧在MainFrm.h中，把m_wndSplitter的定义改成用CFixedSplitterWnd来定义。另外，别忘了在MainFrm.h中加上#include "FixedSplitterWnd.h"。

　　此时再编译运行，就完全达到我们想要的效果了。

sumless

例如上面选取效果的操作方法：

按住Alt键，在第一个字“春”单击鼠标并向下拖动即可。

word按着什么键可以垂直往下选字?

按住alt键，拖动鼠标可以选择任意矩形范围的文字，

光标定位后，按SHIFT键，单击要选择的结尾部分，可以选择一段文字

word文档竖向选取，如何操作？

word文档竖向选取的方法和步骤如下：

1、鼠标选中选取位置，按住按键盘上的ALT键，向下竖向拖动鼠标。

2、选中文字，在弹出的文字属性中，可以改变竖向选择文字的各个属性。

word07 如何使文本框里的文字垂直居中对齐

水平、垂直居中两步走。一，水平居中：点开始(红①)，选中文本框中文字(红②)，点击“水平居中”(红③)；二，垂直居中：点格式(蓝①)，选中文本框中文字(蓝②)，点击“中部对齐”(蓝③)。

请在此输入您的回答，每一次专业解答都将打造您的权威形象

在word中，文本选取有哪几种方法？

1、按住鼠标左键并拖拽。

(选中一段后，再按住Ctrl键，可以选择多个不连续的段落)

2、用方向键

1)鼠标左键单击任意位置

2)按住Shift，配合方向键选择段落

3、Ctrl+A；或者：

1)将光标定位在文首，并按住Shift

2)将光标移至文尾

可以选择全篇文档

4、按住Alt键，选择一个纵向的范围

5、按住Ctrl键，单击鼠标，选中整行

我能想到的就是这几种，它们的优点基本上是自由灵活，可以相互配合使用。

如何选中WORD中的部分文字

1、首先打开Word文档，在页面中输入文字内容。

2、如果需要将输入的文字一次性全部选中的话，使用快捷键“Ctrl+A”。

3、即可将所有的文字内容全部选中。

4、如果需要选中其中的个别文字，可以按下键盘上的“Ctrl”按键。

5、在按着“Ctrl”按键不放的情况下用鼠标左键选中文字内容，即可随意选择文字。

WORD怎么选取全文

在Word中选取全文可以使用组合键“Ctrl+A”，也可以使用鼠标拖动选取全文。

1、打开需要操作的Word文档。

2、同时在键盘上按下“Ctrl”键和字母“A”键。

3、可以看到，已经选中了全文，效果如下图。

4、在文字不是特别多的情况下，也可以通过用鼠标左键拖动的办法来选取全文，灰色区域即代表已选中全文。

word文档里面的文字垂直方向上如何居中？

在word文档里面的文字垂直方向上居中的设置方法：

1、单击页面布局选择卡右下角如图所示的按钮；

2、弹出页面设置对话框，选择版式选项卡，在垂直对齐方式处选择居中即可，如图所示。

Word文档对于我们生活当中，工作当中运用到都会使得方便快捷。下面小编来为大家讲解关于文字的基础操作。
对于文字，我们可以在word将文字移动、复制、粘贴。对于这些操作我们可以用功能区操作、快捷键操作、手动+快捷键操作、或者鼠标右键拖动粘贴。快捷键（Ctrl+x 剪切）、（Ctrl+c 复制）、（Ctrl+v 粘贴）。
剪切，剪切的作用是将所选内容删除放置剪切板上，然后可以粘贴到任意位置，其作用就是可以将文字改变位置。
示例如图：
在这里插入图片描述
我们看到上图文章，我们看到标题春风在最上面居中的位置，我们就将标题春风剪切到文章下面的位置，怎么操作呢?
如图：

这样就是剪切的作用以及操作方法，复制，复制的作用就是保留原格式的状态下，又复制了一份出来，简单来说就是克隆，复制选定文字后在目标位置粘贴。
如图：在这里插入图片描述

这样操作的方法有很多，看大家使用哪些方便就使用那些好啦。可以通过快捷键，也可以在工具栏来进行操作。
工具栏操作位置如图：
在这里插入图片描述
这就是文字的一些基本操作，希望可以帮助到大家，感谢大家的观看。

可拖动的DIV

Tips

要拖动的Dialog

拖动一下

一跳一跳的

好赤果果

源码

不足之处

在切分窗口中固定切分条的位置

word怎么竖向选中_word垂直选取 word中怎么垂直选中文字

Word文本的基础操作，教程来啦，怎么在word中控制文字基础操作

我的选择难度怎么赋值给切割函数啊

如何在word中的图片上画圈标注_怎么在word画圈标注如何在word图片中进行画圈标示...

dreamweaver排列顺序怎么用_教你如何在Dreamweaver移动或对齐AP Div

document.body.scrollTop总是0的原因

Word2003入门动画教程73：让Word中的图片精确定位

myeclipse加载报表配置xml文件失败,项目无法正常运行，怎么解决？

MFC中CRectTracker在CScrollView中使用时问题的解决办法

让你成为Word大神的10个技巧

密码管家 - 最强大的密码管理助手

excel的使用

密码管家 - 最强大的密码管理助手(2012年2月2日重新上传v2.5.0)

word 插入图片方式

硕士生,博士生论文排版技巧方法

MFC数字图像处理（BMP格式读取保存 DFT FFT 直方图色调均化缩放模糊锐化滤镜形态学处理曲线裁剪 ...

vc++ 应用源码包_1

vc++ 应用源码包_6

vc++ 应用源码包_2

Visual Studio程序员箴言--详细书签版

vc++ 应用源码包_5

Visual Studio程序员箴言中文扫描PDF

怎么拖动文档的位置

可拖动的DIV

Tips

要拖动的Dialog

拖动一下

一跳一跳的

好赤果果

源码

不足之处

在切分窗口中固定切分条的位置

word怎么竖向选中_word垂直选取 word中怎么垂直选中文字

Word文本的基础操作，教程来啦，怎么在word中控制文字基础操作

我的选择难度怎么赋值给切割函数啊

如何在word中的图片上画圈标注_怎么在word画圈标注 如何在word图片中进行画圈标示...

dreamweaver排列顺序怎么用_教你如何在Dreamweaver移动或对齐AP Div

document.body.scrollTop总是0的原因

Word2003入门动画教程73：让Word中的图片精确定位

myeclipse加载报表配置xml文件失败,项目无法正常运行，怎么解决？

MFC中CRectTracker在CScrollView中使用时问题的解决办法

让你成为Word大神的10个技巧

密码管家 - 最强大的密码管理助手

excel的使用

密码管家 - 最强大的密码管理助手(2012年2月2日重新上传v2.5.0)

word 插入图片方式

硕士生,博士生论文排版技巧方法

MFC数字图像处理（BMP格式读取 保存 DFT FFT 直方图 色调均化 缩放 模糊 锐化 滤镜 形态学处理 曲线 裁剪 ...

vc++ 应用源码包_1

vc++ 应用源码包_6

vc++ 应用源码包_2

Visual Studio程序员箴言--详细书签版

vc++ 应用源码包_5

Visual Studio程序员箴言中文扫描PDF

怎么拖动文档的位置

如何在word中的图片上画圈标注_怎么在word画圈标注如何在word图片中进行画圈标示...

MFC数字图像处理（BMP格式读取保存 DFT FFT 直方图色调均化缩放模糊锐化滤镜形态学处理曲线裁剪 ...