元素拖拽的实现方式及其总结

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

  • 传统方式:通过监听鼠标事件,获取元素移动的位置,计算并赋值到目标位置上(依赖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>
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页