案例——拖拽

拖拽

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box1{
                width: 100px;
                height: 100px;
                background-color: skyblue;
                position: absolute;
            }
            #box2{
                width: 100px;
                height: 100px;
                background-color: yellow;
                position: absolute;
                left: 200px;
                top: 200px;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                /*
                拖拽box1元素
                 - 拖拽的流程
                     1.当鼠标在被拖拽元素上按下时,开始拖拽  onmousedown
                     2.当鼠标移动时被拖拽元素跟随鼠标移动  onmousemove
                     3.当鼠标松开时,被拖拽元素固定在当前位置 onmouseup
                */

               // 获取box1?
               var box1=document.getElementById("box1");
               // 为box1绑定一个鼠标按下事件
               box1.onmousedown=function(event){
                   // div的偏移量  鼠标.clientX - 元素.offsetLeft
                   // div的偏移量  鼠标.clentY -元素.offsetTop
                   event = event || window.event;
                   var ol=event.clientX - box1.offsetLeft;
                   var ot=event.clientY-box1.offsetTop;

                   // 为document绑定一个onmousemove事件
                   document.onmousemove=function(event){
                       event = event || window.event;
                       // 当鼠标移动时被拖拽元素跟随鼠标移动  onmousemove
                       // 获取鼠标坐标?
                       var left =event.clientX - ol;
                       var top=event.clientY - ot;

                       // 修改box1的位置

                       box1.style.left=left+"px";
                       box1.style.top=top+"px";
                   }
                    // 当鼠标松开时,被拖拽元素固定在当前位置 onmouseup
                   document.onmouseup=function(){
                                   // 取消document.onmousemove事件
                                   document.onmousemove=null;

                                   document.onmouseup=null;
                                   alert(12);
                   }
               };
              /*
              当我们拖拽一个网页中的内容时,浏览器会默认去搜索引擎中搜索内容
              此事后导致拖拽功能的异常
              如果不希望发生这个异常   return false

              对IE8不起作用
              */
              return false;
            }
        </script>
    </head>
    <body>
        <div id="box1"></div>
        <div id="box2"></div>
    </body>
</html>

原文地址:https://www.cnblogs.com/SSPOFA/p/12057497.html

时间: 2024-10-12 02:48:50

案例——拖拽的相关文章

Blend4精选案例图解教程(三):一键拖拽

原文:Blend4精选案例图解教程(三):一键拖拽 拖拽效果,常规实现方法是定义MoveLeftDwon.MoveLeftUp.MouseMove事件,在Blend的世界里,实现对象的拖拽,可以不写一行代码,而且非常简单,本次教程跟大家分享这个技巧. 1.新建项目,在默认设计视图添加一个元素,这里添加一个图片 视图树 设计视图 2.在资源面板(Asset)中,找到Behavior分类,选择MouseDragElementBehavior,从名字上我们就应该能理解这个行为实现的功能 3.把选中的行

HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (二)

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (一) 这篇博客直接在上篇的基础上完成,最终效果: 效果图1: 效果图2: 好了,请允许我把图片贴了两遍,方便大家看效果了~ 可以看出我们的图片的li的html其实还是挺复杂的,于是我把html文档做了一些修改: <span style=&quo

HighCharts操作案例-3D可拖拽柱状图

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getS

100行代码解析Dojo树控件拖拽案例

案例设定: 创建2个树控件,左右排列. 使用拖动的方式,将树节点从左侧树控件拖拽的右侧树控件. 拖拽过程中右侧树控件要进行验证,确认是否可以方式拖拽中的节点. 放置的处理,识别要放置的节点,获取其信息并动态创建新的节点(基于基础类型进行实例化的过程). 右侧树控件内(实例化之后的节点),同类型节点间支持拖动排序. Dojo版本 1.10.3 图例1:创建2个树控件,左右排列. 图例2.3: 使用拖动的方式,将树节点从左侧树控件拖拽的右侧树控件. 拖拽过程中右侧树控件要进行验证,确认是否可以方式拖

html5的拖拽dragAPI(如果看了API不懂,看看那三个案例就会恍然大悟)

1.拖拽和释放定义: 拖拽:Drag; 释放:Drop; 2.源对象和目标对象: 3.相关API: ondragstart:源对象开始被拖动 ondrag:源对象被拖动的过程中 ondragend:源对象被拖动结束 ondragenter:目标对象被源对象拖动进入 ondragover:目标对象被源对象悬浮在上面 ondragleave:源对象拖动着离开了目标对象 ondrop:源对象拖动着在目标对象上方松手 4.拖动的源对象和目标对象之间的数据传递: 源对象数据保存:e.data.Transf

JS——事件详情(拖拽案例:onmousedown、onmousemove、onmouseup方法)

实现拖拽案例 效果如下图所示: 代码如下图所示: 代码思路说明: 第23行代码:在div元素中触发onmousedown事件,实现鼠标在div按下,不提起功能 [区别于onclick,onclick:按下.提起事件,属于两个动作(即:onmousedown+onmouseup)] 第20-21行代码:声明变量,用于计算鼠标按下位置到div位置长度距离 (详细见下图解释分析) 第24-25行代码:设置鼠标按下位置到div位置长度距离(即:鼠标位置-div左边距到浏览器的长度距离) (详细见下图解释

0188 案例:模态框拖拽

弹出框,我们也称为模态框. ? 1.点击弹出层,会弹出模态框, 并且显示灰色半透明的遮挡层. ? 2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层. ? 3.鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动. ? 4.鼠标松开,可以停止拖动模态框移动 1.1.5 模态框拖拽案例分析 点击弹出层, 模态框和遮挡层就会显示出来 display:block; 点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none; 在页面中拖拽的原理:鼠标按下并且移动, 之后松开

JS实现拖拽小案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单的拖拽</title> <link rel="stylesheet" href="../toolkit/reset.min.css"> <style> #box{ height: 200px

案例:简易的Div拖拽

鼠标移入Div区域后,按下鼠标左键,可以拖动Div移动;松开鼠标左键,Div拖动停止.同时要求Div不能拖出屏幕显示区域外. 拖拽原理:距离不变.三个事件(onmousedown.onmousemove.onmouseup) 解决问题: 1.拖拽过程中,鼠标容易滑出Div区块: 2.防止Div拖出页面:修正位置: 3.解除绑定事件:鼠标左键抬起后,Div不再随着鼠标移动而发生位置变化: <!DOCTYPE html> <html lang="zh-CN"> &l