四川盐亭网站制作公司

使用JavaScript怎么实现一个鼠标拖拽多选功能

这篇文章给大家介绍使用JavaScript怎么实现一个鼠标拖拽多选功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

创新互联一直在为企业提供服务，多年的磨炼，使我们在创意设计，网络营销推广到技术研发拥有了开发经验。我们擅长倾听企业需求，挖掘用户对产品需求服务价值，为企业制作有用的创意设计体验。核心团队拥有超过10多年以上行业经验，涵盖创意，策化，开发等专业领域，公司涉及领域有基础互联网服务遂宁托管服务器、重庆APP开发公司、手机移动建站、网页设计、网络整合营销。




  鼠标拖拽多选功能
  
  
    *{
      box-sizing:border-box;
    }
    ul{
      width:500px;
      height:auto;
      margin:0;
      padding:20px;
      font-size: 0;
      /*需设置定位*/
      position:relative;
    }
    li{
      width:70px;
      height:70px;
      margin:10px;
      padding:0;
      display:inline-block;
      vertical-align: top;
      font-size: 13px;
      border:1px solid #d9d9d9;
    }
    #moveSelected{
      position:absolute;
      background-color: blue;
      opacity:0.3;
      border:1px dashed #d9d9d9;
      top:0;
      left:0;
    }
    .selected{
      background-color: pink;
    }
  


  
    
  • 1
    • 
    
  • 2
    • 
    
  • 3
    • 
    
  • 4
    • 
    
  • 5
    • 
    
  • 6
    • 
    
  • 7
    • 
    
  • 8
    • 
    
  • 9
    • 
    
  • 10
    • 
    
  • 11
    • 
    
  • 12
    • 
    
  • 13
    • 
    
  • 14
    • 
    
  • 15
    • 
    
  • 16
    • 
    
  • 17
    • 
    
  • 18
    • 
    
  • 19
    • 
    
  • 20
    • 
    
  • 21
    • 
    
  • 22
    • 
    
    
    
         $(document).ready(function(){     let moveSelected=$('#moveSelected')[0];     let flag=false;//是搜开启拖拽的标志     let oldLeft=0;//鼠标按下时的left,top     let oldTop=0;     let selectedList=[];//拖拽多选选中的块集合     // 鼠标按下时开启拖拽多选，将遮罩定位并展现     $(".list").mousedown(function(event) {       flag=true;       moveSelected.style.top=event.pageY+'px';       moveSelected.style.left=event.pageX+'px';       oldLeft=event.pageX;       oldTop=event.pageY;       event.preventDefault(); // 阻止默认行为       event.stopPropagation(); // 阻止事件冒泡     });     // 鼠标移动时计算遮罩的位置，宽 高     $(".list").mousemove(function(event) {       if(!flag) return;//只有开启了拖拽，才进行mouseover操作       if(event.pageX

    关于使用JavaScript怎么实现一个鼠标拖拽多选功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。


    文章标题：使用JavaScript怎么实现一个鼠标拖拽多选功能
    转载注明：http://scyanting.com/article/jsssgo.html

    其他资讯