zoukankan      html  css  js  c++  java
  • 通过拖动来变换元素顺序

     1     // 拖动变换顺序
     2     var moveItem=document.getElementsByClassName('layui-timeline-item');
     3     dragElement=null;
     4     for(var i=0;i<moveItem.length;i++){
     5         moveItem[i].addEventListener('dragstart',function (evt) {
     6             dragElement=this;
     7         },false);
     8         moveItem[i].addEventListener('dragenter',function (evt) {
     9 
    10             if(dragElement != this){
    11                 this.parentNode.insertBefore(dragElement,this);
    12             }
    13         },false);
    14         moveItem[i].addEventListener('dragleave',function (evt) {
    15             var lists=$('.layui-timeline-item');
    16             for(var j=0;j<lists.length;j++){
    17                 lists.eq(j).j=j;
    18                 var list=lists.eq(j).prevAll().length;
    19                 $('.layui-timeline-item').eq(j).find('span:eq(0)').text(list+1);
    20             }
    21             if(dragElement != this){
    22                 if(this == this.parentNode.lastElementChild || this == this.parentNode.lastChild){
    23                     this.parentNode.appendChild(dragElement);
    24                 }
    25             }
    26         },false)
    27     };
    28     document.ondragover = function(e){e.preventDefault();}
    29     document.ondrop = function(e){e.preventDefault();}
     1 在拖放的过程中会触发以下事件:
     2 
     3 在拖动目标上触发事件 (源元素):
     4 ondragstart - 用户开始拖动元素时触发
     5 ondrag - 元素正在拖动时触发
     6 ondragend - 用户完成元素拖动后触发
     7 
     8 释放目标时触发的事件:
     9 ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
    10 ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
    11 ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
    12 ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
  • 相关阅读:
    js 兼容nextSibling
    ie background repeat 出现空白
    自制日历组件
    js cookie操作方法
    html table 上下左右边框
    js window.onload函数
    js 兼容event.target
    ie minheight
    css table 固定宽度
    [翻译]建立你的第一个Visual WebGui应用程序
  • 原文地址:https://www.cnblogs.com/yangguoe/p/9020746.html
Copyright © 2011-2022 走看看