체크박스를 드래그로 선택하고 싶습니다.
본문
일반적인 구글에서 찾은 소스는 대입을 하니...
체크박스 드래그가 불가능 하네요..ㅠㅠ
그누보드 용으로 가공으로 해야 할 거 같은데...
능력 밖이라서 질문 드립니다...
답변 3
출처에서 약간 응용했어요~
전 잘 되던데
어떻게 될지 모르겠네여~
*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);
});
}
});
능력이 부족하여 실패하였네요...
-----
<?php if ($is_checkbox) { ?>
<div class="wr-chk">
<input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id
----
이 부분이 수정을 어떻게 해야 할지 몰라서...
name = "a1" 이건 안먹히고 위와 같은 형식이라..이리 저리 해도 불가하네요.ㅠㅠ
질문이 너무 추상적입니다.
님이 찾아본 소스나 비슷한 기능을 하는 사이트를 찾아보시는게 상호 이해가 빠르겠네요
사각형을 그리고 그 안에 들어가는 체크 박스를 다 선택하고 싶으신건가요?
아니면 사각형 없이 그냥 체크 한상태로 죽 내리면 선택되게 하고 싶으신건가요?
전자보단 후자가 쉽겠죠
수정이 안되네요...
<form name="dragchkform" method="get">
<input type="checkbox" name="dragchk"> 체크박스 1<br>
<input type="checkbox" name="dragchk"> 체크박스 2<br>
<input type="checkbox" name="dragchk"> 체크박스 3<br>
<input type="checkbox" name="dragchk"> 체크박스 4<br>
<input type="checkbox" name="dragchk"> 체크박스 5<br>
<input type="checkbox" name="dragchk"> 체크박스 6<br>
<input type="checkbox" name="dragchk"> 체크박스 7<br>
<input type="checkbox" name="dragchk"> 체크박스 8<br>
<input type="checkbox" name="dragchk"> 체크박스 9<br>
<input type="checkbox" name="dragchk"> 체크박스 10<br>
</form>
<script language="javascript">
var dragchkstat = "off";
function dragchkNOOP() { return false; }
function dragchkOnMouseDown() {
if (this.checked) {
dragchkstat = "uncheck"; this.checked = false;
} else {
dragchkstat = "check"; this.checked = true;
}
return false;
}
function dragchkOnMouseOver() {
switch (dragchkstat) {
case "off":
break;
case "check":
this.focus(); this.checked = true; break;
case "uncheck":
this.focus(); this.checked = false; break;
}
return false;
}
function dragchkOnMouseUp() { dragchkstat = "off"; return true; }
for (i = 0; i < document.dragchkform.dragchk.length; i++) {
document.dragchkform.dragchk[i].onclick = dragchkNOOP;
document.dragchkform.dragchk[i].onmousedown = dragchkOnMouseDown;
document.dragchkform.dragchk[i].onmouseover = dragchkOnMouseOver;
document.onmouseup = dragchkOnMouseUp;
}
</script>
이 소스처럼 하고 싶어서 말이죠...
마우스로 체크박스를 드래그 하면 되는 방식이요..
저의 소스는
--
<li class="list-item<?php echo $li_css;?>">
<?php if ($is_checkbox) { ?>
<div class="wr-chk">
<input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>">
--
위의 체크박스 부분을 수정하면 될 듯 한데 안돼네요...
아미나 플랫폼 입니다.
아 상관없어요 체크박스는
스크립트가 적용되는 모든 페이지의 체크박스를 전부 적용하게 해놓아서
체크박스는 솔직히 따로 만들지 않으셔도 됩니다.
다만
html 부분 중 가장 하단에 있던
<div class="focus"></div>
와
css
.focus {position:fixed; border:1px solid red; background-color:rgb(128, 0, 0, 0.3);}
이 두 부분은 반드시 필요하니
체크 박스가 있는 페이지 하단에 넣어주시고
스크립트만 적용해주시면 됩니다.
답변을 작성하시기 전에 로그인 해주세요.
