精华内容
下载资源
问答
  • 元素拖拽的实现方式及其总结

    千次阅读 2019-01-06 11:10:08
    HTML5方式:HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,只需要通过监听元素的拖放事件就能实现各种拖放功能。想要拖放某个元素,必须设置该元素的 draggable 属性为 true 一、传统方式: <...

    实现元素拖放的两种方式:

    • 传统方式:通过监听鼠标事件,获取元素移动的位置,计算并赋值到目标位置上(依赖position的定位样式);
    • HTML5方式:HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,只需要通过监听元素的拖放事件就能实现各种拖放功能。想要拖放某个元素,必须设置该元素的 draggable 属性为 true

    一、传统方式:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        .dialog{
            position: absolute;
            left: 100px;
            top:200px;
            width:200px;
            height: 300px;
        }
        .title{
            width: 100%;
            height: 15%;
            background-color: lightseagreen;
            text-align: center
        }
        .itbody{
            width: 100%;
            height: 90%;
            background-color: lightgoldenrodyellow
        }
        </style>
    </head>
    <body>
        <div class="dialog">
            <div class="title">title</div>
            <div class="itbody"></div>
        </div>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script>
            var isMouseDown = false;
            var lastPoint = {}
            $('.title').on('mousedown',function(e){
                isMouseDown = true;
                lastPoint.x = e.pageX;
                lastPoint.y = e.pageY
            })
            $(document).on('mousemove',function(e){
                if(isMouseDown){
                    var targetX =parseInt($('.dialog').css("left")) + e.pageX - lastPoint.x
                    var targetY =parseInt($('.dialog').css("top")) + e.pageY - lastPoint.y
                    $('.dialog').css("left",targetX+'px')
                    $('.dialog').css("top",targetY+'px')
                    lastPoint.x = e.pageX
                    lastPoint.y = e.pageY
                }
            }).on("mouseup",function () {
                isMouseDown = false;
                lastPoint = {}
              })
        </script>
    </body>
    </html>
    

    二、HTML5方式:

    HTML5中,拖放事件由不同的元素产生,一个元素被拖放,他可能会经过很多个元素上,最终到达想要放置的元素内,这里把被拖放的元素称为源对象,被经过的元素称为过程对象,到达的元素称为目标对象,不同的对象产生不同的拖放事件。

    (一)源对象事件:

    • dragstart:源对象开始拖放,开始移动被拖拽元素时触发(主体是被拖拽元素)
    • drag:源对象拖放过程中,移动被拖拽元素时触发(主体是被拖拽元素)
    • dragend:源对象拖放结束,整个拖放操作结束时触发(主体是被拖拽元素)

    (二)过程对象事件:

    • dragenter:源对象开始进入过程对象范围内,被拖拽元素进入目标元素时触发(主体
      是目标元素)
    • dragover:源对象在过程对象范围内移动,被拖拽元素在目标元素内移动时触发(主
      体是目标元素)
    • dragleave:源对象离开过程对象的范围,被拖拽元素离开目标元素时触发(主体是目
      标元素)

    (三)目标对象事件:

    • drop:源对象被拖放到目标对象内,目标元素完全接受被拖拽元素时触发(主体是目
      标元素)

    三、HTML5拖放的数据传递对象

    在所有拖放事件中提供了一个数据传递对象 dataTransfer,用于在源对象和目标对象间传递数据。它包含了一些方法及属性。包括了 setData()getData()clearData()方法来操作拖拽过程中传递的数据,setDragImage()方法来设置拖拽时鼠标的下面的图片(默认为被拖拽元素),effectAlloweddropEffect 属性来设置拖放效果。

    (一)setData(format,data)
    设置拖拽事件中传递的数据,format 参数为数据类型该方法向 dataTransfer 对象中存入数据,接收两个参数,第一个表示要存入数据种类的字符串,现在支持有以下几种:

    • text/xml:XML 文字
    • text/uri-list:URL 列表,每个 URL 为一行

    第二个data参数是要存入的数据,如:

    event.dataTransfer.setData('text/plain','Hello World');
    

    (二)getData(format)

    • 获拖拽事件中传递的数据,format 参数为数据类型
    • 该方法从 dataTransfer 对象中读取数据,参数为在 setData 中指定的数据种类,例
      如:event.dataTransfer.getData('text/plain');

    (三)clearData()
    该方法清除 dataTransfer 对象中存放的数据,参数可选,为数据种类。若参数为空,
    则清空所有种类的数据

    (四)setDragImage(element, x, y)
    该方法通过用 img 元素来设置拖放图标,其中 element 表示拖拽时鼠标下面的图片,x 表示图标距离鼠标指针的 x 轴方向的偏移值,y 表示图标距离鼠标指针 y 轴方向的偏移值,例如:

    var source = document.getElementById('source'),
    icon = document.createElement('img');
    icon.src = 'img.png';
    

    (五)files属性:
    返回被拖拽的 FileList(文件列表),相当于它是用户拖拽进浏览器的文件列表,是个FileList对象,有length属性,可以通过下标访问

    四、HTML5拖放演示demo:

    <!DOCTYPE html>
    <html>
        <head>
    		<meta charset="UTF-8">
    		<title>使用拖拽更改支付宝的默认付款方式</title>
    		 
    		<style type="text/css">
    			h3{
    			    width:310px;
    			    height:20px;
    			    position:absolute;
    			    left:50%;
    			    
    			    margin-left:-115px;
    			    font-family:"黑体";
    			    
    			}
    			ul{
    			    list-style:none;
    			    position:absolute;
    			    left:50%;
    			    top:50px;
    			    margin-left:-150px;
    			    width:300px;
    			    height:300px;
    			    
    			}
    			li{
    			    
    			    box-sizing:border-box;
    			    padding:10px 0 10px 0;
    			    border:1px dashed gray;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<h3>使用拖拽更改支付宝的默认付款方式</h3>
    		<ul id="card">
    			<li draggable="true">招商信用卡</li>			
    			<li draggable="true">交通信用卡</li>			
    			<li draggable="true">中信储蓄卡</li>			
    			<li draggable="true">建行储蓄卡</li>			
    			<li draggable="true">蚂蚁花呗</li>			
    			<li draggable="true">余额宝</li>			
    			<li draggable="true">余额</li>			
            </ul>
            <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    		<script>
    			$(function(){
    			    var dragSrc;
    			    $('li').each(function(index,ele){
    			        $(ele).on("dragstart",function(e){
    			            dragSrc = this;
    			            e.originalEvent.dataTransfer.setData("text/html",this.innerHTML)
    			        }).on("dragover",function(e){
    			            e.preventDefault();
    			            
    			        }).on("drop",function(e){
    			            if(dragSrc!=this){
    			                dragSrc.innerHTML = this.innerHTML;
    			                this.innerHTML = e.originalEvent.dataTransfer.getData("text/html")
    			            }
    			        })
    			    })
    			})
    		</script>
    	</body>
    </html>
    
    展开全文
  • vc++ 开发实例源码包

    2014-12-16 11:25:17
    该实例可进行局域网的聊天、一对多、多对一、和多对多的传送和续传,理论上这是我本人的实现目的,而且目前经测试已基本实现了上述功能,而且网速一般有几M/S。另外有只打开一个应用程序、CRichEdit的使用、最小到...
  • vc++ 应用源码包_1

    热门讨论 2012-09-15 14:22:12
    该实例可进行局域网的聊天、一对多、多对一、和多对多的传送和续传,理论上这是我本人的实现目的,而且目前经测试已基本实现了上述功能,而且网速一般有几M/S。另外有只打开一个应用程序、CRichEdit的使用、最小到...
  • vc++ 应用源码包_2

    热门讨论 2012-09-15 14:27:40
    该实例可进行局域网的聊天、一对多、多对一、和多对多的传送和续传,理论上这是我本人的实现目的,而且目前经测试已基本实现了上述功能,而且网速一般有几M/S。另外有只打开一个应用程序、CRichEdit的使用、最小到...
  • vc++ 应用源码包_6

    热门讨论 2012-09-15 14:59:46
    该实例可进行局域网的聊天、一对多、多对一、和多对多的传送和续传,理论上这是我本人的实现目的,而且目前经测试已基本实现了上述功能,而且网速一般有几M/S。另外有只打开一个应用程序、CRichEdit的使用、最小到...
  • vc++ 应用源码包_5

    热门讨论 2012-09-15 14:45:16
    该实例可进行局域网的聊天、一对多、多对一、和多对多的传送和续传,理论上这是我本人的实现目的,而且目前经测试已基本实现了上述功能,而且网速一般有几M/S。另外有只打开一个应用程序、CRichEdit的使用、最小到...
  • vc++ 应用源码包_4

    热门讨论 2012-09-15 14:38:35
    该实例可进行局域网的聊天、一对多、多对一、和多对多的传送和续传,理论上这是我本人的实现目的,而且目前经测试已基本实现了上述功能,而且网速一般有几M/S。另外有只打开一个应用程序、CRichEdit的使用、最小到...
  • vc++ 应用源码包_3

    热门讨论 2012-09-15 14:33:15
    该实例可进行局域网的聊天、一对多、多对一、和多对多的传送和续传,理论上这是我本人的实现目的,而且目前经测试已基本实现了上述功能,而且网速一般有几M/S。另外有只打开一个应用程序、CRichEdit的使用、最小到...
  • javaSE代码实例

    2016-06-21 22:30:18
    9.1 概述及其特性 156 9.2 成员变量在接口中的使用 157 9.2.1 语法规则 157 9.2.2 接口中成员变量的作用 158 9.3 方法在接口中的使用 159 9.3.1 语法规则 159 9.3.2 如何实现接口 160 9.3.3 接口引用...
  • 5.5.1.3 实现橡皮筋功能 5.5.2 画刷的使用 5.5.2.1 带颜色的画刷的使用 5.5.2.2 带位图的画刷的使用 5.5.3 字体的使用 5.5.3.1 一个简单的文字处理程序 5.5.3.2 模拟卡拉OK 程序 5.5.3.3 剪切区和路径层 第...
  • 实例186 利用事件对象实现线程同步 实例187 利用互斥对象实现线程同步 实例188 利用临界区实现线程同步 实例189 用信号量实现线程同步 实例190 多线程 实例 6.8 鼠标、键盘相关设置 实例191 动画鼠标 实例192...
  • 实例186 利用事件对象实现线程同步 实例187 利用互斥对象实现线程同步 实例188 利用临界区实现线程同步 实例189 用信号量实现线程同步 实例190 多线程 实例 6.8 鼠标、键盘相关设置 实例191 动画鼠标 实例192...
  • 实例186 利用事件对象实现线程同步 实例187 利用互斥对象实现线程同步 实例188 利用临界区实现线程同步 实例189 用信号量实现线程同步 实例190 多线程 实例 6.8 鼠标、键盘相关设置 实例191 动画鼠标 实例192...
  • 实例186 利用事件对象实现线程同步 实例187 利用互斥对象实现线程同步 实例188 利用临界区实现线程同步 实例189 用信号量实现线程同步 实例190 多线程 实例 6.8 鼠标、键盘相关设置 实例191 动画鼠标 实例192...
  • 实例186 利用事件对象实现线程同步 实例187 利用互斥对象实现线程同步 实例188 利用临界区实现线程同步 实例189 用信号量实现线程同步 实例190 多线程 实例 6.8 鼠标、键盘相关设置 实例191 动画鼠标 实例192...
  • 实例186 利用事件对象实现线程同步 实例187 利用互斥对象实现线程同步 实例188 利用临界区实现线程同步 实例189 用信号量实现线程同步 实例190 多线程 实例 6.8 鼠标、键盘相关设置 实例191 动画鼠标 实例192...
  • 实例186 利用事件对象实现线程同步 实例187 利用互斥对象实现线程同步 实例188 利用临界区实现线程同步 实例189 用信号量实现线程同步 实例190 多线程 实例 6.8 鼠标、键盘相关设置 实例191 动画鼠标 实例192...
  • 实例186 利用事件对象实现线程同步 实例187 利用互斥对象实现线程同步 实例188 利用临界区实现线程同步 实例189 用信号量实现线程同步 实例190 多线程 实例 6.8 鼠标、键盘相关设置 实例191 动画鼠标 实例192...
  •  cc实例186 利用事件对象实现线程同步   cc实例187 利用互斥对象实现线程同步   cc实例188 利用临界区实现线程同步   cc实例189 用信号量实现线程同步   cc实例190 多线程cc实例   6.8 鼠标.c键盘...
  • 4.2.1 数组及其操作 089 4.2.2 日期和时间 091 4.2.3 初涉函数 092 4.2.4 函数的变量作用域 094 4.2.5 Object简介 095 4.2.6 JavaScript的DOM操作 097 4.2.7 DOM事件处理 100 4.2.8 利用JavaScript...
  •  cc实例186 利用事件对象实现线程同步   cc实例187 利用互斥对象实现线程同步   cc实例188 利用临界区实现线程同步   cc实例189 用信号量实现线程同步   cc实例190 多线程cc实例   6.8 鼠标.c键盘...
  •  cc实例186 利用事件对象实现线程同步   cc实例187 利用互斥对象实现线程同步   cc实例188 利用临界区实现线程同步   cc实例189 用信号量实现线程同步   cc实例190 多线程cc实例   6.8 鼠标.c键盘...
  •  cc实例186 利用事件对象实现线程同步   cc实例187 利用互斥对象实现线程同步   cc实例188 利用临界区实现线程同步   cc实例189 用信号量实现线程同步   cc实例190 多线程cc实例   6.8 鼠标.c键盘...
  •  cc实例186 利用事件对象实现线程同步   cc实例187 利用互斥对象实现线程同步   cc实例188 利用临界区实现线程同步   cc实例189 用信号量实现线程同步   cc实例190 多线程cc实例   6.8 鼠标.c键盘...
  • cc实例184 执行一个外部程序直到其结束 cc实例185 调用具有参数的可执行程序 6.7 线程同步 cc实例186 利用事件对象实现线程同步 cc实例187 利用互斥对象实现线程同步 cc实例188 利用临界区实现线程同步 ...
  • cc实例184 执行一个外部程序直到其结束 cc实例185 调用具有参数的可执行程序 6.7 线程同步 cc实例186 利用事件对象实现线程同步 cc实例187 利用互斥对象实现线程同步 cc实例188 利用临界区实现线程同步 ...
  • 4.2.1 数组及其操作 089 4.2.2 日期和时间 091 4.2.3 初涉函数 092 4.2.4 函数的变量作用域 094 4.2.5 Object简介 095 4.2.6 JavaScript的DOM操作 097 4.2.7 DOM事件处理 100 4.2.8 利用JavaScript...

空空如也

空空如也

1 2
收藏数 31
精华内容 12
关键字:

鼠标监听事件及其功能实现