Html5原生拖拽操纵实例解说--百分百源码网

Html5原生拖拽操纵实例解说-

发布时间：08/01 来源：未知浏览：关键词：

本文主要介绍了详解Html5原生拖拽操纵，小编觉得挺不错的，此刻分享给大家，也给大家做个参照。一起追随小编过来看看吧，但愿能帮忙到大家。本文主要介绍了详解Html5原生拖拽操纵，小编觉得挺不错的，此刻分享给大家，也给大家做个参照。一起追随小编过来看看吧，但愿能帮忙到大家。

比来的一次项目开发中用到了H5的拖拽功能，因为现有项目运用的是VUE全家桶，运用了vuedragable这个插件，但是整个历程是比拼疼痛的。遂决议从H5拖拽的道理开端研究，然后再将其利用到数据驱动的框架中。在H5中要想实现拖放操纵，至少需要经过两个步骤：1) 将想要拖放的对象元素的draggable属性设为true（img与a元素默许允许拖放）；2) 编写与拖放相干的事件处置代码。为了测试简捷，我这里第一运用jQuery库完成拖拽的根本功能。

1. 拖拽历程

1.1 拖动事件

当按住鼠标拖动draggable元素的时候会按照如下次序顺次触发

dragstart -> drag -> dragend

dragstart ：在按住鼠标开端拖动时候触发（触发一次）
drag ：在按住鼠标拖动的历程触发（延续触发）
dragend ：在开释鼠标后触发（不管是把元素放到了有效的放置指标，还是放置到了无效的放置指标上）

1.2 放置事件

当将draggable元素元素拖动到容器中将会按照如下次序顺次触发

dragenter -> dragover -> drop

dragenter:只有有元素被拖动到放置指标上，就会触发dragenter事件
dragover:dragenter紧随其后的就是dragover事件，并且在被拖动的元素还在放置指标的范畴内挪移时，就会延续触发该事件。
dragleave:元素被拖出了放置指标，会触发dragleave
drop:将拖动元素放置到指标元素上的时候会引发

1.3 完备事件流

从开端拖动元素到放置元素到指标区域，将会按照如下次序顺次触发

dragstart->drag->dragenter->dragover->dragleave->drop->dragend

2. 解决firefox对拖拽不支撑的题目

要是我们直接给一个元素增加draggable属性，在chrome，opera中是可以直接进行拖拽（没有可以开释的操纵（比方箭头变+号）），但是在firefox却没有反馈

    
        优
        良
        中
        差
    
    《script》
        //没有任何JS代码
    《script》

要解决这个题目必需为拖拽元素绑定dragstart事件处置函数，而且在该函数中调取event.dataTransfer.setData函数

《script》
     
        优
        良
        中
        差
    
    $('.canDrog > li').bind('dragstart',function(event){
        //firefox 必需拜访用于拖拽通讯的dataTransfer对象
        event.dataTransfer.setData("Text",'1');
    });
《script》

3. 解决chrome，opera拖拽元素至容器中时没有显示可开释标识题目

可开释标识运用不一样的操纵系统可能不一样，在mac chrome中涌现的是一个圆形标识里面嵌入一个白色的'+'。

解决方案是为容器绑定dragover事件

     
        优
        良
        中
        差
    
    
            
                
                    节次/星期
                    周一
                    周二
                    周三
                    周四
                    周五
                
            
            
                
                    首先节
                    
                    
                    
                    
                    
                
                
            
    
《script》
    $('.canDrog > li').bind('dragstart',function(event){
        //firefox 必需拜访用于拖拽通讯的dataTransfer对象
        event.dataTransfer.setData("Text",'1');
    });
    //google chrome,opera需要增加
    $(".dataTbl").bind("dragover",'td',function(e){  
        e.originalEvent.preventDefault();  
    })  
《script》

4. 解决放置时firefox打开新选项卡题目

运用firefox的时候要是开释了被拖拽的元素，默许阅读器将会打开一个新的选项卡,如下

《script》
    //将元素开释到目前元素中
    $('.dataTbl').bind('drop','td',function(event){
        console.log('+++drop');
        event.preventDefault();
        event.stopPropagation();
    });
《script》

但是要是将draggable元素拖到其他地方，仍然会致使打开新选项卡题目的涌现，这时可认为所有容器增加如上代码。

H5怎么做出拖拽结果

Bootstrap Modal增加拖拽的办法实例

JS实现的简略拖拽购物车功能

以上就是Html5原生拖拽操纵实例解说的细致内容，更多请关注百分百源码网其它相干文章！

打赏