使用Shift键选择多个div

问题描述 投票:1回答:1

我正在尝试选中所有带Shift键的复选框,例如Gmail Shift + Mouse Click。一个接一个地工作,它是一个div。但是,当我添加shift key代码时,它不起作用。


已更改:

几乎完成。当我先单击,然后按Shift键,然后单击5th all checked,但是当我单击3rd时出现问题。直到5至3号才被选中。

let held = false;
		let indexes = {start: null, end: null};
		let start = false;
		document.onkeydown = function(e) {
			if(e.keyCode == 16) {
				held = true;
			}
		}
		document.onkeyup = function(e) {
			if(e.keyCode == 16) {
				held = false;
			}
		}
		$(document).on('click','.dropCheckBox',function(){
			$(this).parents(".capturesGrid").toggleClass('selected');
			$(this).toggleClass('active');
			if($(".grid-view .selected").length > 0) 
			{
				$(this).parents(".grid-view").addClass('checking');
				$(".options-bar").addClass('allSection');
				$(".iconActions").removeClass('d-none');
				$(".allsec-det").addClass('allSection-det');
				
			}
			else 
			{
				$(this).parents(".grid-view").removeClass('checking');
				$(".options-bar").removeClass('allSection');
				$(".iconActions").addClass('d-none');
				$(".allsec-det").removeClass('allSection-det');
			}
			if(held) {
				indexes.end = $(this).data('index');
				if(indexes.start) {
					console.log(indexes);
					if(indexes.end < indexes.start) {
						$('.dropCheckBox').each(function(index, item) {
							item = $(item);
							if(!$(this).hasClass('active')) {
								if(item.data('index') && item.data('index') < indexes.start && item.data('index') > indexes.end) {
									if(!item.hasClass('active')) {
										item.addClass('active');
										$(this).parents(".grid-view").addClass('checking');
										$(this).parents(".capturesGrid").toggleClass('selected');
									}
								}
							} else {
								if(item.data('index') && item.data('index') < indexes.start && item.data('index') > indexes.end) {
									if(item.hasClass('active')) {
										item.removeClass('active');										
										$(this).parents(".grid-view").removeClass('checking');
										$(this).parents(".capturesGrid").toggleClass('selected');
									}
								}
							}
						});
					}
				} else {
					$('.dropCheckBox').each(function(index, item) {
					item = $(item);
					if(!$(this).hasClass('active')) {
						if(item.data('index') && item.data('index') < indexes.end) {
							if(!item.hasClass('active')) {
								item.addClass('active');
								$(this).parents(".grid-view").addClass('checking');
								$(this).parents(".capturesGrid").toggleClass('selected');
							}
						}
					} else {
						if(item.data('index') && item.data('index') < indexes.end) {
							if(item.hasClass('active')){
								item.removeClass('active');
								$(this).parents(".grid-view").removeClass('checking');
								$(this).parents(".capturesGrid").toggleClass('selected');
							}
						}
					}
				})
				}
				indexes = {start: null, end: null};
				start = false;
				
			} else {
				indexes.start = $(this).data('index');
			}
			
		});
.dropCheckBox {

    position: static;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: rgba(0,0,0,0.7);
    cursor: pointer;
    border: 2px solid #fff;
    transition: all .2s ease;

}

.dropCheckBox.active {
    background: linear-gradient(0deg, #214fc6, #4574ec);
    border: none;
}

.capturesGrid .dropCheckBox {

    position: absolute;
    top: 10px;
    left: 10px;
    opacity: 1;
    z-index: 2;

}
.dropCheckBox .icon {

    width: 13px;
    height: 13px;
    fill: #dee3eb;

}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="grids-row">
<div class="row">
  <div class="col">
   <div class="capturesGrid">
    <div data-index="0" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="1" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="2" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="3" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="4" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="5" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="6" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="7" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="8" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>

</div>
</div>
javascript
1个回答
0
投票

您可以使用checkbox,并且可以找到不同的答案here

$(document).ready(function() {
    var $chkboxes = $('.dropCheckBox');
    var lastChecked = null;
    
    $chkboxes.click(function(e) {
    $(this).parents(".capturesGrid").toggleClass('selected');
			$(this).toggleClass('active');
      
        if(!lastChecked) {
            lastChecked = this;
            return;
        }
       
        if(e.shiftKey) {
        $(this).removeClass('active');
            var start = $chkboxes.index(this);
            var end = $chkboxes.index(lastChecked);
           
           

			 $chkboxes.slice(Math.min(start,end)+1, Math.max(start,end)+1).toggleClass('active');
      	
 
        }

        lastChecked = this;
    });
});
.dropCheckBox {

    position: static;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: rgba(0,0,0,0.7);
    cursor: pointer;
    border: 2px solid #fff;
    transition: all .2s ease;

}

.dropCheckBox.active {
    background: linear-gradient(0deg, #214fc6, #4574ec);
    border: none;
}

.capturesGrid .dropCheckBox {

    position: absolute;
    top: 10px;
    left: 10px;
    opacity: 1;
    z-index: 2;

}
.dropCheckBox .icon {

    width: 13px;
    height: 13px;
    fill: #dee3eb;

}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="grids-row">
<div class="row">
  <div class="col">
   <div class="capturesGrid">
    <div data-index="1" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="2" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="3" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="4" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="5" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="6" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="7" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="8" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="9" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>

</div>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.