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 - 在一个拖动过程中,释放鼠标键时触发此事件
  • 相关阅读:
    BZOJ3670: [Noi2014]动物园
    BZOJ4424: Cf19E Fairy
    BZOJ1257: [CQOI2007]余数之和
    BZOJ2438: [中山市选2011]杀人游戏
    SDOI2017第一轮
    BZOJ4820: [Sdoi2017]硬币游戏
    NOIP2016
    HDU1848 Fibonacci again and again(SG 函数)
    HDU1517 Multiply Game
    HDU1907 Jhon
  • 原文地址:https://www.cnblogs.com/yangguoe/p/9020746.html
Copyright © 2011-2022 走看看