마우스 드레그로 체크박스 체크하기

마우스 드레그로 체크박스 체크하기

출처에서 약간 응용했어요~


*css 

.focus {position:fixed; border:1px solid red; background-color:rgb(128, 0, 0, 0.3);}


*html

<div class="col-xs-12">
          <input type="checkbox" name="a1" value="">
          <input type="checkbox" name="a2" value="">
          <input type="checkbox" name="a3" value="">
          <input type="checkbox" name="a4" value="">
          <input type="checkbox" name="a5" value="">
          <input type="checkbox" name="a6" value="">
        </div>
<div class="focus"></div>



*script

$(function(){
  var target = 'input[type=checkbox]'; //셀렉트로 묶을 객체
  var mode = false;
  var startX = 0;
  var startY = 0;
  var left, top, width, height;
  var $focus = $(".focus");
  $(document).on("mousedown", function(e) {
    mode = true;
    startX = e.clientX;
    startY = e.clientY;
    width = height = 0;
    $focus.show();
    rangeSelect(target, 0, 0, 0, 0, function() { //기존에 선택된 객체를 선택취소한다.
    $(this).removeAttr("checked","");
    });
  }).on('mouseup', function(e) {
    mode = false;
    $focus.hide();
    $focus.css("width", 0);
    $focus.css('height', 0);
    //범위 내 객체를 선택한다.
    rangeSelect(target, left, top, left + width, top + height, function(include) {
    if(include){
      console.log($(this));
      $(this).attr("checked","checked");
    }else{
      $(this).removeAttr("checked","");
      }
    });
  }).on('mousemove', function(e) {
    if(!mode) {
    return;
    }
    var x = e.clientX;
    var y = e.clientY;
    //마우스 이동에 따라 선택 영역을 리사이징 한다
    width = Math.max(x - startX, startX - x);
    left = Math.min(startX, x);
    $focus.css('left', left);
    $focus.css("width", width);
    height = Math.max(y - startY, startY - y);
    top = Math.min(startY, y);
    $focus.css('top', top);
    $focus.css('height', height);
  });
  function rangeSelect(selector, x1, y1, x2, y2, cb) {
    $(selector).each(function() {
    var $this = $(this);
    var offset = $this.offset();
    var x = offset.left;
    var y = offset.top;
    var w = $this.width();
    var h = $this.height();
    //범위 안인지 체크
    cb.call(this, x >= x1 && y >= y1 && x + w <= x2 && y + h <= y2);
    });
  }
});




출처 : https://sub0709.tistory.com/64

Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand