鼠标左键拖拽的多选

beixiao1909 2012-01-16 06:38:38

最近在做鼠标左键拖拽的多选，但是一直都没什么思路。具体效果类似于点击鼠标左键不放，拖拽。会出现一个区域，被区域覆盖的文件即被选中。有木有人提供源码呀，亲！

...全文

662 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

MS20HJ 2012-09-11

打赏
举报

好复杂

泡泡鱼_ 2012-09-11

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<title>test</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<style type="text/css">

    .container{width:100%;height:500px;border:1px solid #bfbfbf;}

    .container ul{width:100%;height:100%;float:left;list-style:none;}

    .container ul li{width:100%;height:25px;float:left;list-style:none;}

    .onselect{ background:#ff9900;}

</style>

<script type="text/javascript">

//将前面发的那个插件粘贴到这里

function changeCheckbox(o,selection){

    var x1 = selection.x1;

	var y1 = selection.y1;

	var x2 = selection.x2;

	var y2 = selection.y2;

    $('.container :checkbox').each(function(){

            var myX=$(this).offset().left;

            var myY=$(this).offset().top;

            if(myX>=x1 && myY>=y1 && myY<=y2){

                this.checked=true;

                $(this).parent().addClass("onselect");

            }else{

                this.checked=false;

                $(this).parent().removeClass("onselect");

            }

    })

}

function stopSelection(o,selection){

    $("div[class^='imgareaselect']").hide();

}

$(function(){

    $('.container').imgAreaSelect({onSelectChange: changeCheckbox,onSelectEnd:stopSelection }); 

    

})

</script>

</head>

<body>

<div class="container">

<ul>

<li><input type="checkbox" value="1" name="me" />第1项</li>

<li><input type="checkbox" value="2" name="me" />第2项</li>

<li><input type="checkbox" value="3" name="me" />第3项</li>

<li><input type="checkbox" value="4" name="me" />第4项</li>

<li><input type="checkbox" value="5" name="me" />第5项</li>

<li><input type="checkbox" value="6" name="me" />第6项</li>

<li><input type="checkbox" value="7" name="me" />第7项</li>

<li><input type="checkbox" value="8" name="me" />第8项</li>

<li><input type="checkbox" value="9" name="me" />第9项</li>

<li><input type="checkbox" value="10" name="me" />第10项</li>

<li><input type="checkbox" value="11" name="me" />第11项</li>

<li><input type="checkbox" value="12" name="me" />第12项</li>

<li><input type="checkbox" value="13" name="me" />第13项</li>

<li><input type="checkbox" value="14" name="me" />第14项</li>

<li><input type="checkbox" value="15" name="me" />第15项</li>

</ul>

</div>

</body>

</html>

泡泡鱼_ 2012-09-11

打赏
举报

借用别人的一个插件，给你改了个小例子，代码太长，一次发不完，先发别人的那个插件

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('5.G={2a:29};5.G.2E=i(D,3){12 $1s=5(\'<E></E>\'),$1h=5(\'<E></E>\'),$Q=5(\'<E></E>\'),$2f=5(\'<E></E>\'),$2g=5(\'<E></E>\'),$28=5(\'<E></E>\'),$2e=5(\'<E></E>\'),g,f,1b,R,N,P,T,U,1L,15=0,1u,$p,1K,1F,1Z,1T,1j=10,j=[],V=0,H=1,2O,d,u,6,7,b,9,x,y,4={6:0,b:0,7:0,9:0,r:0,B:0};12 $a=$1s.C($1h).C($Q);12 $o=$2f.C($2g).C($28).C($2e);i W(x){A x+1b.g+U.g-T.g}i S(y){A y+1b.f+U.f-T.f}i Y(x){A x-1b.g-U.g+T.g}i X(y){A y-1b.f-U.f+T.f}i 1e(h){A h.2N+U.g-T.g}i 1c(h){A h.2V+U.f-T.f}i 17(){1b=5(D).2z();R=5(D).r();N=5(D).B();c(5(P).2v(\'1i\'))T=U={g:0,f:0};K{T=5(P).2z();U={g:P.2T,f:P.2P}}g=W(0);f=S(0)}i 18(2k){$a.m({g:W(4.6)+\'l\',f:S(4.b)+\'l\',r:8.q(4.r-3.1t*2,0)+\'l\',B:8.q(4.B-3.1t*2,0)+\'l\'});$2f.m({g:g+\'l\',f:f+\'l\',r:4.6+\'l\',B:N+\'l\'});$2g.m({g:g+4.6+\'l\',f:f+\'l\',r:4.r+\'l\',B:4.b+\'l\'});$28.m({g:g+4.7+\'l\',f:f+\'l\',r:R-4.7+\'l\',B:N+\'l\'});$2e.m({g:g+4.6+\'l\',f:f+4.9+\'l\',r:4.r+\'l\',B:N-4.9+\'l\'});c(2k!==J){c(5.G.1y!=1V)5(M).L(5.G.1y,5.G.2a);c(3.19)5(M).2S(5.G.1y,5.G.2a=1V)}}i 14(h){c(!1L){17();1L=13;$a.1d(\'2R\',i(){1L=J})}x=Y(1e(h))-4.6;y=X(1c(h))-4.b;j=[];c(3.1M){c(y<=1j)j[V]=\'n\';K c(y>=4.B-1j)j[V]=\'s\';c(x<=1j)j[H]=\'w\';K c(x>=4.r-1j)j[H]=\'e\'}$Q.m(\'27\',j.1k?j.2I(\'\')+\'-j\':3.1E?\'2Q\':\'\')}i 2b(h){c(h.1U!=1)A J;17();c(3.1M&&j.1k>0){5(\'1i\').m(\'27\',j.2I(\'\')+\'-j\');6=W(j[H]==\'w\'?4.7:4.6);b=S(j[V]==\'n\'?4.9:4.b);5(M).F(1p);$Q.L(\'F\',14);5(M).1d(\'1l\',i(){j=[];5(\'1i\').m(\'27\',\'\');c(3.2t)$a.C($o).1g();3.1J(D,4);5(M).L(\'F\',1p);$Q.F(14)})}K c(3.1E){1Z=4.6+g;1T=4.b+f;1K=1e(h);1F=1c(h);5(M).F(1S).1d(\'1l\',i(){3.1J(D,4);5(M).L(\'F\',1S)})}K 5(D).1n(h);A J}i 1C(){7=8.q(g,8.v(g+R,6+8.O(9-b)*u*(7>=6?1:-1)));9=8.1B(8.q(f,8.v(f+N,b+8.O(7-6)/u*(9>=b?1:-1))));7=8.1B(7)}i 1v(){9=8.q(f,8.v(f+N,b+8.O(7-6)/u*(9>=b?1:-1)));7=8.1B(8.q(g,8.v(g+R,6+8.O(9-b)*u*(7>=6?1:-1))));9=8.1B(9)}i 21(2F,2J){7=2F;9=2J;c(3.1q&&8.O(7-6)<3.1q){7=6-3.1q*(7<6?1:-1);c(7<g)6=g+3.1q;K c(7>g+R)6=g+R-3.1q}c(3.1m&&8.O(9-b)<3.1m){9=b-3.1m*(9<b?1:-1);c(9<f)b=f+3.1m;K c(9>f+N)b=f+N-3.1m}7=8.q(g,8.v(7,g+R));9=8.q(f,8.v(9,f+N));c(u)c(8.O(7-6)/u>8.O(9-b))1v();K 1C();c(3.1R&&8.O(7-6)>3.1R){7=6-3.1R*(7<6?1:-1);c(u)1v()}c(3.24&&8.O(9-b)>3.24){9=b-3.24*(9<b?1:-1);c(u)1C()}4.6=Y(8.v(6,7));4.7=Y(8.q(6,7));4.b=X(8.v(b,9));4.9=X(8.q(b,9));4.r=8.O(7-6);4.B=8.O(9-b);18();3.2d(D,4)}i 1p(h){7=!j.1k||j[H]||u?1e(h):W(4.7);9=!j.1k||j[V]||u?1c(h):S(4.9);21(7,9);A J}i 1a(1G,1D){7=(6=1G)+4.r;9=(b=1D)+4.B;4.6=Y(6);4.b=X(b);4.7=Y(7);4.9=X(9);18();3.2d(D,4)}i 1S(h){12 1G=8.q(g,8.v(1Z+1e(h)-1K,g+R-4.r));12 1D=8.q(f,8.v(1T+1c(h)-1F,f+N-4.B));1a(1G,1D);h.32();A J}i 1X(h){17();4.6=4.7=Y(1K=6=7=1e(h));4.b=4.9=X(1F=b=9=1c(h));4.r=0;4.B=0;j=[];18();$a.C($o).1z();5(M).L(\'1l\',1W).F(1p);$Q.L(\'F\',14);3.2A(D,4);5(M).1d(\'1l\',i(){c(3.2t||(4.r*4.B==0))$a.C($o).1g();3.1J(D,4);5(M).L(\'F\',1p);$Q.F(14)})}i 1W(){5(M).L(\'F\',1X);$a.C($o).1g()}i 2c(h){c(h.1U!=1)A J;5(M).1d(\'F\',1X).1d(\'1l\',1W);A J}i 26(){17();18(J);6=W(4.6);b=S(4.b);7=W(4.7);9=S(4.9)}12 1V=i(h){12 k=3.19,d=10,t,20=h.3j||h.1U;c(!1r(k.1Y))d=k.1Y;c(!1r(k.1H)&&h.2n)d=k.1H;c(!1r(k.1I)&&h.2j)d=k.1I;c(!1r(k.23)&&(h.1x||h.2l.1x))d=k.23;c(k.1Y==\'j\'||(k.1H==\'j\'&&h.2n)||(k.1I==\'j\'&&h.2j)||(k.23==\'j\'&&(h.1x||h.2l.1x))){2G(20){11 37:d=-d;11 39:t=8.q(6,7);6=8.v(6,7);7=8.q(t+d,6);c(u)1v();16;11 38:d=-d;11 2D:t=8.q(b,9);b=8.v(b,9);9=8.q(t+d,b);c(u)1C();16;2m:A}21(7,9)}K{6=8.v(6,7);b=8.v(b,9);2G(20){11 37:1a(8.q(6-d,g),b);16;11 38:1a(6,8.q(b-d,f));16;11 39:1a(6+8.v(d,R-Y(7)),b);16;11 2D:1a(6,b+8.v(d,N-X(9)));16;2m:A}}A J};Z.1O=i(I){3=5.1N(3,I);c(I.6!=29){4.6=I.6;4.b=I.b;4.7=I.7;4.9=I.9;I.1z=13}c(I.19)3.19=5.1N({1H:1,1I:\'j\'},I.19===13?{}:I.19);P=5(3.P).3k(0);17();$p=5(D);3l($p.1k&&!$p.2v(\'1i\')){c(!1r($p.m(\'z-2h\'))&&$p.m(\'z-2h\')>15)15=$p.m(\'z-2h\');c($p.m(\'2q\')==\'1u\')1u=13;$p=$p.P()}6=W(4.6);b=S(4.b);7=W(4.7);9=S(4.9);4.r=7-6;4.B=9-b;18();c(I.1g)$a.C($o).1g();K c(I.1z)$a.C($o).1z();$o.1w(3.1f+\'-3g\');$1s.1w(3.1f+\'-4\');$1h.1w(3.1f+\'-1h\');$Q.1w(3.1f+\'-Q\');$a.m({1t:3.1t+\'l\'});$1s.m({2p:3.2o,2w:3.2x});$1h.m({1Q:\'2B\',2i:3.2y});$Q.m({1Q:\'3h\',2i:3.2K});$o.m({2w:3.2M,2p:3.2H});u=3.u&&(d=3.u.33(/:/))?d[0]/d[1]:29;c(3.1A||3.1o===J){$a.L(\'F\',14).L(\'1n\',2b);5(D).C($o).L(\'1n\',2c);5(2s).L(\'j\',26)}K c(3.1o||3.1A===J){c(3.1M||3.1E)$a.F(14).1n(2b);c(!3.30)5(D).C($o).1n(2c);5(2s).j(26)}5(3.P).2X($o.C($a));3.1o=3.1A=22};c(5.25.2r)5(D).2Y(\'2Z\',\'34\');5.G.1y=5.25.2r||5.25.35?\'3e\':\'3f\';$a.C($o).m({3d:\'3c\',2q:1u?\'1u\':\'36\',3a:\'3b\',15:15>0?15:\'0\'});$1s.m({1Q:\'2B\'});2C={2y:\'#2L\',2K:\'#2u\',1t:1,1f:\'31\',1E:13,1M:13,2o:\'#2u\',2x:0.2,2H:\'#2L\',2M:0.2,P:\'1i\',2A:i(){},2d:i(){},1J:i(){}};3=5.1N(2C,3);Z.1O(3)};5.2W.G=i(3){3=3||{};Z.3i(i(){c(5(Z).1P(\'G\'))5(Z).1P(\'G\').1O(3);K{c(3.1o===22&&3.1A===22)3.1o=13;5(Z).1P(\'G\',2U 5.G.2E(Z,3))}});A Z};',62,208,'|||options|selection|jQuery|x1|x2|Math|y2||y1|if|||top|left|event|function|resize||px|css||||max|width|||aspectRatio|min|||||return|height|add|img|div|mousemove|imgAreaSelect||newOptions|false|else|unbind|document|imgHeight|abs|parent|border2|imgWidth|viewY|parOfs|parScroll||viewX|selY|selX|this||case|var|true|areaMouseMove|zIndex|break|adjust|update|keys|doMove|imgOfs|evY|one|evX|classPrefix|hide|border1|body|resizeMargin|length|mouseup|minHeight|mousedown|enable|selectingMouseMove|minWidth|isNaN|area|borderWidth|fixed|aspectRatioYX|addClass|altKey|keyPress|show|disable|round|aspectRatioXY|newY1|movable|startY|newX1|shift|ctrl|onSelectEnd|startX|adjusted|resizable|extend|setOptions|data|borderStyle|maxWidth|movingMouseMove|moveY|which|docKeyPress|cancelSelection|startSelection|arrows|moveX|key|doResize|undefined|alt|maxHeight|browser|windowResize|cursor|outRight|null|onKeyPress|areaMouseDown|imgMouseDown|onSelectChange|outBottom|outLeft|outTop|index|borderColor|ctrlKey|resetKeyPress|originalEvent|default|shiftKey|selectionColor|backgroundColor|position|msie|window|autoHide|fff|is|opacity|selectionOpacity|borderColor1|offset|onSelectStart|solid|initOptions|40|init|newX2|switch|outerColor|join|newY2|borderColor2|000|outerOpacity|pageX|keyDown|scrollTop|move|mouseout|bind|scrollLeft|new|pageY|fn|append|attr|unselectable|persistent|imgareaselect|preventDefault|split|on|safari|absolute||||overflow|hidden|none|display|keydown|keypress|outer|dashed|each|keyCode|get|while'.split('|'),0,{}))

挨踢直男 2012-09-11

打赏
举报

javascript拖拽效果

宏锐 2012-09-11

打赏
举报

if(ex-mx>0)
{
$("#choose").css({"left":mx});
}else
{
$("#choose").css({"left":ex});
}
if(ey-my>0)
{
$("#choose").css({"top":my});
}else
{
$("#choose").css({"top":ey});
}
wid = Math.abs(mx - ex);//取绝对值
hei = Math.abs(my - ey);
$("#choose").css({"width":wid});
$("#choose").css({"height":hei});

中间部分改成这样就可以随便哪个方向都可以选框了。

h123hu 2012-09-11

打赏
举报

学习了哈，可以从鼠标的按下的坐标和拖动后弹起的坐标，
来确定一个坐标区域，
然后，在这个区域里面的选择项，就自动勾选

北京不不 2012-01-17

打赏
举报

给你推荐一个其他方式的
http://www.pure-color.cn/wp-lab/js/doc/send.html
你点选择。

beixiao1909 2012-01-17

打赏
举报

其实我也只是要做过选框出来就可以了，然后在选框内的文件加选中的标记。

beixiao1909 2012-01-17

打赏
举报

亲，你想说用checkbox的多选么。我在做一个web excel的项目，后台部分的人需要这个效果。。。唉，其实我自己都开始做了ctrl+鼠标左键的多选了。但是那边非要那个效果。我自己写了个，但是也有点问题。比如会有缓存之类的bug。如果鼠标是往左下移的话，就移不到又上去。鼠标是移右上的话却能往左下移。不知道表述清楚没，呵呵。我直接上代码吧。里面的jquery.min.js文件你有吧。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#choose{ position:absolute; border:2px solid #09F; display:none; background-color:#CFC; }
</style>
</head>

<body>
<div id="choose"></div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
//alert($(window).height())
var e = e||window.event;
var mx,my
lm = false
mx = 0
my = 0
ex = 0
ey = 0
wid = 0
hei = 0
size = true;
$(document).mousedown(function(e){
mx = 0
my = 0
mx = e.pageX;
my = e.pageY;
lm = true;
})
$(document).mousemove(function(e){
if(lm && size){
$("#choose").show();
$(window).css({"cursor":"pointer"});
ex = e.pageX;
ey = e.pageY;
}
if(ex-mx>0 && ey - my>0){
$("#choose").css({"top":my});
$("#choose").css({"left":mx});
wid = ex - mx;
hei = ey - my;
}else if(ex-mx<0 && ey - my>0){
$("#choose").css({"top":my});
$("#choose").css({"right": $(window).width() - mx});
wid = mx-ex;
hei = ey - my;
}else if(ex - mx > 0 && ey-my <0){
$("#choose").css({"bottom": $(window).height() - my});
$("#choose").css({"left":mx});
wid = ex-mx;
hei = my - ey;
}else if(ex -mx <0 && ey - my < 0){ //这里其实可以直接是else，但是我怕自己忘了这个条件，就还是写了条件在这里。和别人讨论的时候他们说这个效果很难做，不知道你有没有思路。
$("#choose").css({"bottom":$(window).height() - my});
$("#choose").css({"right":$(window).width() - mx});
wid = mx - ex;
hei = my - ey;
}
$("#choose").css({"width":wid});
$("#choose").css({"height":hei});
})
$(document).mouseup(function(e){

lm = false;
})

})
</script>
</html>