鼠标移动选择元素 -

keimon

浏览: 72534 次
性别:
来自: 上海

最近访客更多访客>>

Jessy_橙子

yw8886484

LuWeiFeng

ntanita

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

鼠标移动选择元素

博客分类：

jquery-demo

jquery

x轴方向的4种情况，y轴方向也有类似的4种情况

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片选择</title>
    <style>
        .queue-item{position:relative;border:1px solid #dedede;padding:1px;background:#fff;display:inline-block;*display:inline;*zoom:1;overflow:hidden;float: left;margin:0 12px 20px 0; background-color: #fff;}
        .queue-item .picitem{position:relative;overflow:hidden;float:left;}
        .queue-item,.queue-item .picitem{width:110px;height:94px;}
        .checkpic{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background-color: rgba(0, 0, 0, 0.5);filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#7F000000, endColorstr=#7F000000);}
        .ticon-check{background-position:-280px -345px;width:60px;height:26px;position:absolute;top:50%;left:50%;margin-top:-13px;margin-left:-30px;}

        .picname{position:absolute;bottom:0;left:0;width:100%;height:22px;line-height:22px;font-size:12px;color:#fff;text-indent:5px; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;background-color: rgba(0, 0, 0, 0.5);filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#7F000000, endColorstr=#7F000000);}
        .queue-item .picdel{display:none;position:absolute;bottom:1px;right:1px;background:#000;width:22px;height:22px;cursor:pointer;}
        .queue-item .picdel .ticon{margin-left:3px;}
        .picdel .ticon-del{background-position:-16px -280px; color: #fff; font-size: 10px;}
        .queue-item-selected .checkpic .ticon-check{background-position:-280px -345px;}
        .queue-item:hover .checkpic,
        .queue-item-hover .checkpic,
        .queue-item-selected .checkpic{display:block; color: #fff;}

        .picitem img{vertical-align: middle;max-width: 100%;}
        .queuebox{height: 350px;overflow-y:auto;overflow-x: hidden;}
        .queueinner{padding:1px 10px;overflow:hidden;margin-right:-10px;}
        .queue-item:hover .picdel{display:block;}
        .comeon a{color:#07C;}
        .comeon a:hover{color:#e38;}

        #box{width:10px; height:10px; top:0px; height:0px; position:absolute; border:1px solid #CCCCCC; background-color:#FFFFCC; opacity:0.3; filter:alpha(opacity:30); z-index:10; display:none; }
        .picname{ -moz-user-select:none; -webkit-user-select:none; user-select:none; }
    </style>
</head>
<body onselectstart="return false">
<div>
    <div id="upload-content" class="tday upload-content oper-content">
        <div class="hr_a"></div>
        
        <div class="upload-box">
            <div class="sortright">
                <div class="queuebox">
                    <div class="queueinner">
                        <div class="queue-item">
                            <span class="picitem"><i class="middle-full"></i><img src="img/1.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
                            <span class="checkpic"><i class="ticon ticon-check">选择</i></span>
                            <span class="picdel"><i class="ticon ticon-del">删</i></span>
                        </div>
                        <div class="queue-item">
                            <span class="picitem"><i class="middle-full"></i><img src="img/2.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
                            <span class="checkpic"><i class="ticon ticon-check">选择</i></span>
                            <span class="picdel"><i class="ticon ticon-del">删</i></span>
                        </div>
                        <div class="queue-item">
                            <span class="picitem"><i class="middle-full"></i><img src="img/3.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
                            <span class="checkpic"><i class="ticon ticon-check">选择</i></span>
                            <span class="picdel"><i class="ticon ticon-del">删</i></span>
                        </div>
                        <div class="queue-item">
                            <span class="picitem"><i class="middle-full"></i><img src="img/4.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
                            <span class="checkpic"><i class="ticon ticon-check">选择</i></span>
                            <span class="picdel"><i class="ticon ticon-del">删</i></span>
                        </div>
                        <div class="queue-item">
                            <span class="picitem"><i class="middle-full"></i><img src="img/5.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
                            <span class="checkpic"><i class="ticon ticon-check">选择</i></span>
                            <span class="picdel"><i class="ticon ticon-del"></i></span>
                        </div>
                        <div class="queue-item">
                            <span class="picitem"><i class="middle-full"></i><img src="img/6.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
                            <span class="checkpic"><i class="ticon ticon-check">选择</i></span>
                            <span class="picdel"><i class="ticon ticon-del">删</i></span>
                        </div>
                        <div class="queue-item">
                            <span class="picitem"><i class="middle-full"></i><img src="img/7.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
                            <span class="checkpic"><i class="ticon ticon-check">选择</i></span>
                            <span class="picdel"><i class="ticon ticon-del">删</i></span>
                        </div>
                        <div class="queue-item">
                            <span class="picitem"><i class="middle-full"></i><img src="img/8.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
                            <span class="checkpic"><i class="ticon ticon-check">选择</i></span>
                            <span class="picdel"><i class="ticon ticon-del">删</i></span>
                        </div>
                        <div class="queue-item">
                            <span class="picitem"><i class="middle-full"></i><img src="img/9.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
                            <span class="checkpic"><i class="ticon ticon-check">选择</i></span>
                            <span class="picdel"><i class="ticon ticon-del">删</i></span>
                        </div>
                        <div class="queue-item">
                            <span class="picitem"><i class="middle-full"></i><img src="img/0.jpg" alt="" /><span class="picname">如果文字过长会怎么样示例图片.JPG</span></span>
                            <span class="checkpic"><i class="ticon ticon-check">选择</i></span>
                            <span class="picdel"><i class="ticon ticon-del">删</i></span>
                        </div>
                        <div class="queue-item">
                            <span class="picitem"><i class="middle-full"></i><img src="img/1.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
                            <span class="checkpic"><i class="ticon ticon-check">选择</i></span>
                            <span class="picdel"><i class="ticon ticon-del">删</i></span>
                        </div>
                        <div class="queue-item">
                            <span class="picitem"><i class="middle-full"></i><img src="img/2.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
                            <span class="checkpic"><i class="ticon ticon-check">选择</i></span>
                            <span class="picdel"><i class="ticon ticon-del">删</i></span>
                        </div>
                        <div class="queue-item">
                            <span class="picitem"><i class="middle-full"></i><img src="img/3.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
                            <span class="checkpic"><i class="ticon ticon-check">选择</i></span>
                            <span class="picdel"><i class="ticon ticon-del">删</i></span>
                        </div>
                        <div class="queue-item">
                            <span class="picitem"><i class="middle-full"></i><img src="img/4.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
                            <span class="checkpic"><i class="ticon ticon-check">选择</i></span>
                            <span class="picdel"><i class="ticon ticon-del">删</i></span>
                        </div>
                        <div class="queue-item">
                            <span class="picitem"><i class="middle-full"></i><img src="img/5.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
                            <span class="checkpic"><i class="ticon ticon-check">选择</i></span>
                            <span class="picdel"><i class="ticon ticon-del">删</i></span>
                        </div>
                        <div class="queue-item">
                            <span class="picitem"><i class="middle-full"></i><img src="img/6.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
                            <span class="checkpic"><i class="ticon ticon-check">选择</i></span>
                            <span class="picdel"><i class="ticon ticon-del">删</i></span>
                        </div>
                        <div class="queue-item">
                            <span class="picitem"><i class="middle-full"></i><img src="img/7.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
                            <span class="checkpic"><i class="ticon ticon-check">选择</i></span>
                            <span class="picdel"><i class="ticon ticon-del">删</i></span>
                        </div>
                        <div class="queue-item">
                            <span class="picitem"><i class="middle-full"></i><img src="img/8.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
                            <span class="checkpic"><i class="ticon ticon-check">选择</i></span>
                            <span class="picdel"><i class="ticon ticon-del">删</i></span>
                        </div>
                        <div class="queue-item">
                            <span class="picitem"><i class="middle-full"></i><img src="img/9.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
                            <span class="checkpic"><i class="ticon ticon-check">选择</i></span>
                            <span class="picdel"><i class="ticon ticon-del">删</i></span>
                        </div>
                        <div class="queue-item">
                            <span class="picitem"><i class="middle-full"></i><img src="img/0.jpg" alt="" /><span class="picname">如果文字过长会怎么样示例图片.JPG</span></span>
                            <span class="checkpic"><i class="ticon ticon-check">选择</i></span>
                            <span class="picdel"><i class="ticon ticon-del">删</i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" src="../jquery-1.7.2.js"></script>

<script>
$(".queuebox").delegate("div.queue-item","click",function(){
        $(this).toggleClass("queue-item-selected");
})

$(function(){
    var _bool = false, _hasMove = false;
    var startX, startY, endX, endY,boxX,boxY,boxW,boxH;
     if($('#box').length == 0){
         $('body').append('<div id="box">');
     }
    var $box = $('#box');
    $('.sortright').bind('mousedown', function(e){
        _bool = true;
        startX = e.pageX;
        startY = e.pageY;
    })
    $(document).bind('mousemove', function(e){
        if(!_bool){
            return false;
        }
        _hasMove = true;
        endX = e.pageX;
        endY = e.pageY;
        boxX = startX > endX ? endX : startX;
        boxY = startY > endY ? endY : startY;
        boxW = Math.abs(startX - endX);
        boxH = Math.abs(startY - endY);
        $box.css({'left':boxX+'px', 'top':boxY+'px', width:boxW+'px', height:boxH+'px'}).show();
    })
    $(document).bind('mouseup', function(){
        if(_bool){
            if(_hasMove){
                var len = $('.picitem').length;
                for(var i=0; i<len; i++){
                    var picL = $('.picitem').eq(i).offset().left,
                    picT = $('.picitem').eq(i).offset().top,
                    picW = $('.picitem').outerWidth(),
                    picH = $('.picitem').outerHeight(),
                    picR = picL + picW,
                    picB = picT + picH;

                    /*
                     以中心点判断是否选择；
                     var picCenterL = picL + picW/2;
                     var picCenterT = picT + picH/2;
                     if(picCenterL > boxX && picCenterL < (boxX + boxW) && picCenterT > boxY && picCenterT < (boxY + boxH))
                    */
                    //任何一部分判断是否选择
                    //x轴方向4种情况，y轴方向4种情况
                    if(((picL > boxX && picR < (boxX + boxW)) || (picL > boxX && picL < (boxX + boxW)) ||
                            (picR > boxX && picR < (boxX + boxW)) || (picL < boxX && picR > (boxX + boxW))) &&
                            ((picT > boxY && picT < boxY + boxH) || (picT < boxY && picB > (boxY + boxH)) ||
                            (picB > boxY && picB < (boxY + boxH)) || (picT > boxY && picB < (boxY + boxH)))){
                        if($('.picitem').eq(i).parent('.queue-item').hasClass('queue-item-selected')){
                            $('.picitem').eq(i).parent('.queue-item').removeClass('queue-item-selected');
                        }else{
                            $('.picitem').eq(i).parent('.queue-item').addClass('queue-item-selected');
                        }
                    }
                }
            }
          _bool = false;
          _hasMove = false;
          $box.hide();
        }
    })
})
</script>
</body>
</html>