Explication détaillée du code JavaScript pour implémenter la fonction de multi-sélection par glisser-déposer de la souris-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Explication détaillée du code JavaScript pour implémenter la fonction de multi-sélection par glisser-déposer de la souris

Aug 13, 2017 pm 02:50 PM

javascript js 代码

Cet article présente principalement l'exemple d'implémentation de la fonction multi-sélection glisser-déposer de la souris dans js. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Récemment, j'ai créé une fonction pour implémenter le glissement de la souris et la sélection multiple à l'aide de js, j'ai donc fait le tri dans mes idées et écrit une petite démo :

Le masque apparaît :

Le bloc recouvert par le masque est le bloc sélectionné (la couleur de fond est rose)

Ce qui suit est le code spécifique, et les commentaires sont dans le texte pour communiquer avec tout le monde.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;鼠标拖拽多选功能&lt;/title&gt;
  &lt;script src=&quot;https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;style type=&quot;text/css&quot;&gt;
    *{
      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;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;ul class=&quot;list&quot;&gt;
    &lt;li&gt;1&lt;/li&gt;
    &lt;li&gt;2&lt;/li&gt;
    &lt;li&gt;3&lt;/li&gt;
    &lt;li&gt;4&lt;/li&gt;
    &lt;li&gt;5&lt;/li&gt;
    &lt;li&gt;6&lt;/li&gt;
    &lt;li&gt;7&lt;/li&gt;
    &lt;li&gt;8&lt;/li&gt;
    &lt;li&gt;9&lt;/li&gt;
    &lt;li&gt;10&lt;/li&gt;
    &lt;li&gt;11&lt;/li&gt;
    &lt;li&gt;12&lt;/li&gt;
    &lt;li&gt;13&lt;/li&gt;
    &lt;li&gt;14&lt;/li&gt;
    &lt;li&gt;15&lt;/li&gt;
    &lt;li&gt;16&lt;/li&gt;
    &lt;li&gt;17&lt;/li&gt;
    &lt;li&gt;18&lt;/li&gt;
    &lt;li&gt;19&lt;/li&gt;
    &lt;li&gt;20&lt;/li&gt;
    &lt;li&gt;21&lt;/li&gt;
    &lt;li&gt;22&lt;/li&gt;
    &lt;!-- 鼠标拖拽出的遮罩 （定位为 position:absolute）--&gt;
    &lt;!-- 遮罩最好是在绑定了mouseover事件的元素内部，并且不要阻止遮罩的冒泡事件。这样鼠标移到了遮罩上面，依然可以利用冒泡执行父元素的mouseover事件，就不会出现遮罩只能扩大，不能缩小的情况了（亲自试过） --&gt;
    &lt;p id=&quot;moveSelected&quot;&gt;&lt;/p&gt;
  &lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
  $(document).ready(function(){
    let moveSelected=$(&#39;#moveSelected&#39;)[0];
    let flag=false;//是搜开启拖拽的标志
    let oldLeft=0;//鼠标按下时的left,top
    let oldTop=0;
    let selectedList=[];//拖拽多选选中的块集合

    // 鼠标按下时开启拖拽多选，将遮罩定位并展现
    $(&quot;.list&quot;).mousedown(function(event) {
      flag=true;
      moveSelected.style.top=event.pageY+&#39;px&#39;;
      moveSelected.style.left=event.pageX+&#39;px&#39;;
      oldLeft=event.pageX;
      oldTop=event.pageY;
      event.preventDefault(); // 阻止默认行为
      event.stopPropagation(); // 阻止事件冒泡
    });
    // 鼠标移动时计算遮罩的位置，宽 高
    $(&quot;.list&quot;).mousemove(function(event) {
      if(!flag) return;//只有开启了拖拽，才进行mouseover操作
      if(event.pageX&lt;oldLeft){//向左拖
        moveSelected.style.left=event.pageX+&#39;px&#39;;
        moveSelected.style.width=(oldLeft-event.pageX)+&#39;px&#39;;
      }else{
        moveSelected.style.width=(event.pageX-oldLeft)+&#39;px&#39;;
      }
      if(event.pageY&lt;oldTop){//向上
        moveSelected.style.top=event.pageY+&#39;px&#39;;
        moveSelected.style.height=(oldTop-event.pageY)+&#39;px&#39;;
      }else{
        moveSelected.style.height=(event.pageY-oldTop)+&#39;px&#39;;
      }
      event.preventDefault(); // 阻止默认行为
      event.stopPropagation(); // 阻止事件冒泡
    });
    //鼠标抬起时计算遮罩的right 和 bottom，找出遮罩覆盖的块，关闭拖拽选中开关，清除遮罩数据
    $(&quot;.list&quot;).mouseup(function(event) {
      moveSelected.style.bottom=Number(moveSelected.style.top.split(&#39;px&#39;)[0])+Number(moveSelected.style.height.split(&#39;px&#39;)[0]) + &#39;px&#39;;
      moveSelected.style.right=Number(moveSelected.style.left.split(&#39;px&#39;)[0])+Number(moveSelected.style.width.split(&#39;px&#39;)[0])+&#39;px&#39;;
      findSelected();
      flag=false;
      clearDragData();
      event.preventDefault(); // 阻止默认行为
      event.stopPropagation(); // 阻止事件冒泡
    });
    $(&quot;.list&quot;).mouseleave(function(event) {
      flag=false;
      moveSelected.style.width=0;
      moveSelected.style.height=0;
      moveSelected.style.top=0;
      moveSelected.style.left=0;
      event.preventDefault(); // 阻止默认行为
      event.stopPropagation(); // 阻止事件冒泡
    });
    function findSelected(){
      let blockList=$(&#39;.list&#39;).find(&#39;li&#39;);
      for(let i=0;i&lt;blockList.length;i++){
        //计算每个块的定位信息
        let left=$(blockList[i]).offset().left;
        let right=$(blockList[i]).width()+left;
        let top=$(blockList[i]).offset().top;
        let bottom=$(blockList[i]).height()+top;
        //判断每个块是否被遮罩盖住（即选中）
        let leftFlag=moveSelected.style.left.split(&#39;px&#39;)[0]&lt;=left &amp;&amp; left&lt;=moveSelected.style.right.split(&#39;px&#39;)[0];
        let rightFlag=moveSelected.style.left.split(&#39;px&#39;)[0]&lt;=right &amp;&amp; right&lt;=moveSelected.style.right.split(&#39;px&#39;)[0];
        let topFlag=moveSelected.style.top.split(&#39;px&#39;)[0]&lt;=top &amp;&amp; top&lt;=moveSelected.style.bottom.split(&#39;px&#39;)[0];
        let bottomFlag=moveSelected.style.top.split(&#39;px&#39;)[0]&lt;=bottom &amp;&amp; bottom&lt;=moveSelected.style.bottom.split(&#39;px&#39;)[0];
        if((leftFlag || rightFlag) &amp;&amp; (topFlag || bottomFlag)){
          selectedList.push(blockList[i]);
          $(blockList[i]).addClass(&#39;selected&#39;);
        }
      }
      console.log(selectedList);
    }
    function clearDragData(){
      moveSelected.style.width=0;
      moveSelected.style.height=0;
      moveSelected.style.top=0;
      moveSelected.style.left=0;
      moveSelected.style.bottom=0;
      moveSelected.style.right=0;
    }
  });
&lt;/script&gt;

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn