• HTML学习--拖放API实现拖放排序


    摘抄至:https://www.cnblogs.com/linxin/p/6794542.html

    前言

    HTML5中提供了直接拖放的API,极大的方便我们实现拖放效果,不需要写一大堆的js,只需要通过监听元素的拖放事件就能实现各种拖放功能。

    想要拖放某些元素,必须设置该元素的 draggable 的属性为 true ,当该属性为 false 时,将不允许拖放。而 img 元素和 a 元素都默认设置了 draggable 属性为 true,可直接拖放,如果不想拖放这两个元素,就把属性设为 false 即可。

    拖放事件

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

    源对象:

    • dragstart: 源对象开始拖放
    • drag : 源对象拖放过程中
    • dragend : 源对象拖放结束

    过程对象:

    • dragenter:源对象开始进入过程对象范围内。
    • dragover:源对象在过程对象范围内移动。
    • dragleave:源对象离开过程对象的范围。

    目标对象:

    • drop:源对象被拖放到目标对象内。
    <div id="source" draggable="true">a元素</div>
    <div id="process">b元素</div>
    <div id="target">c元素</div>
    
    <script>
        var source = document.getElementById('source'); // a 元素
        var process = document.getElementById('process'); //  b 元素
        var target = document。getElementById('target'); // c 元素
    
        source.addEventListener('dragstart', function(ev){
            console.log('a元素开始被拖动');
    }, false)
    
        process.addEventListener('dragenter', function(ev){
            console.log('a元素开始进入b元素');
    }, false)
    
        process.addEventListener('dragleave', function(ev){
            console.log('a元素离开b元素');
    }, false)
    
        target.addEventListener('drop', function(ev){
             console.log('a元素被拖放到c元素');
             ev.preventDefault();
    }, false)
        document.ondragover = function(e){e.preventDefault();}
    </script>

    dataTransfer  对象

    在所有拖放事件中提供了一个数据传递对象 dataTransfer ,用于在源对象和目标对象间传递数据。接下来认识一下这个对象的方法和属性,来了解它是如何传递数据的。

    setData()

    该方法向 dataTransfer 对象中存入数据。接收两个参数,第一个表示要存入数据种类的字符串,现在支持有以下几种:

    • text/plain:文本文字。
    • text/html:HTML文字。
    • test/xml:XML文字。
    • text/uri-list:URL列表,每个URL为一行。

    第二个参数为要存入的数据。例如:

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

    getData()

    该方法从 dataTransfer 对象中读取数据。参数为在 setData 中指定的数据种类。例如:

    event.dataTransfer.getData('text/plain');

    clearData()

    该方法清除 dataTransfer 对象中存放的数据。参数可选,为数据种类。若参数为空,则清除所有种类的数据。例如:

    event.dataTransfer.clearData();

    setDragImage()

    该方法通过用 img 元素来设置拖放图标。接收三个参数,第一个为图标元素,第二个为图标元素里鼠标指针的X轴位移量,第三个为图标元素离鼠标指针的Y轴位移量。例如:

    var source = document.getElementById('source'),
          icon = document.createElement('img');
    
    icon.src = 'img.png';
    
    source.addEventListener('dragstart', function(ev){
            ev.dataTransfer.setDragImage(icon, -10, -10)
    }, false)

    effectAllowed 和 dropEffect 属性

    这两个属性结合起来设置拖放的视觉效果。

    值得注意的是:IE 不支持 dataTransfer 对象。

    实现拖放排序

    上面已经熟悉了拖放 API 使用,我们来实现个简单的拖放排序,这也是在项目中比较常见的。先来理一下思路:

    • 在一个列表中,每一个元素都可以被拖放,那首先要给每个元素设置 draggable 属性为 true。
    • 监听每一个元素的 dragstart 事件,对源对象走样式处理区分。
    • 监听每一个元素的 dragenter 事件,当源对象进入到当前元素里,就把源对象添加到该元素之前。这样子后面的元素就会被源对象挤下去,实现排序的效果。
    • 但是会发现,源对象无法排到最后一个,只能咋倒数第二个。这是就要监听 dragleave 事件,当过程对象是最后一个元素时,源对象离开了过程对象,这时就把源对象添加到最后一个。

    主要代码如下:

    var source = document.querySelectorAll('.list');
          dragElement = null;
    
    for(var i = 0; i < source.length; i++){
          source[i].addEventListener('dragstart', function(ev){
                dragElement = this;
        }, false);
    
           source[i].addeventListener('dragenter', function(ev){
                if(dragElement != this){
                      this.parentNode.insertBefore(dragElement, this);    
            }
        }, false)
    
            source[i].addEventListener('dragleave', function(ev){
                if(dragElement != this){
                       if(this == this.parentNode.lastElementChild || this == this.parentNode.lastChild){
                              this.parentNode.appendChild(dragElement);
                 }
            }
        }, false) 
    };
    
    documnet.ondragover = function(e){e.prevenDefault();}
    documnet.ondrop = function(e){e.prevenDefault();}
  • 相关阅读:
    刚搬过了,请大家多多支持!!
    [导入]搞到了visual studio 2005 professional edtion
    一些常用的正则表达式
    xinxp的隐藏技巧
    今天领准考证了
    推荐一本.net的好书
    今天装上Linux了
    隐藏在Windows XP中的28个秘密武器
    为 Sharepoint 创建可视的 WebPart
    在 NHibernate 中一切必须是 Virtual 的吗?
  • 原文地址:https://www.cnblogs.com/xushuhai/p/10268321.html
Copyright © 2020-2023  润新知