使用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://dzwzjz.com/article/jsssgo.html

大橙子网站建设，新征程启航

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

其他资讯