@ Postbird

email：ptbird@yeah.net >

website：www.ptbird.cn >

本页面采用 bootcss cdn服务的bootstrap&jquery，如页面显示不正常或jquery无反应，请确认网络连接正确。

POSTBIRD:There I am ,in the world more exciting!

注：为显示效果，将图片做成base64编码 附件包内容为加载图片，不加载base64!

js 实现鼠标拖动选择插件（极致小） mouseMoveSelect.js

Demo1


注：1、默认的图片的HTML代码是：

photo 的容器 class 是 photo-item
input 的 class 是 photo-selector

 < div class="photo-item">
     < img src="./images/1.jpg"width="100px" alt="" class="photo-img">
     < br>< input type="checkbox"GUID="ASD1-2222-2222-2222" class="photo-selector">
 < / div>
当前已经选择： 0 张图片
选择列表：

使用说明：

一、文件引入：<script src="./mouseMoveSelect.js"><script>

三、函数调用： 以第一个demo举例 


//  cSelectedPhotoList 全局变量函数用来存储选中的内容
//  通过 MouseSelected()函数进行数据的绑定，每次鼠标经过动作或者是全选动作都通过这个函数进行选中的判断
//      如果checked  = true  ，则加入cSelectedPhotoList中

//  设置内容显示---使用两个全局变量的函数
function setVarShow(){
    $(".select-length").text(cSelectedPhotoList.length);
    $(".select-list").text(cSelectedPhotoList);
}

版权声明：

一、开放使用，您可以在此基础上按需求调整或将函数粘贴出以减少get请求数量。

二、您可以在此基础上二次包装并再次进行发布。

三、License ： MIT

JS源代码： 

/** Created by postbird on 2016/6/18.  ...*/
/**
 *      @postbird
 *      1、本插件采用js编写，可直接将函数复制到个人js文件，减少get请求数
 *      2、author：powered by postbird
 *      3、email： ptbird@yeah.net
 *      4、site：http://www.ptbird.cn
 *      5、license : MIT
 * */
/**
 * 图片的html DOM如下所示 可以根据实际需求进行更改
 *
 *  < div class="photoitem">
 *       < img src="./images/1.jpg"width="100px" alt="" class="photo-img">
 *       < br>< input type="checkbox" class="photo-selector">
 *  < /div>
 */
//-----------------------------------------------
var bStartSelect = false;
window.cSelectedPhotoList=[];//存储选中的值的列表
document.onselectstart = function () {
    return false;
}
//鼠标按下--------表示移动选择开始
function MouseDown() {
    bStartSelect = true;
    console.log("start");
}
//鼠标放开--------表示移动选择结束
function MouseUp() {
    bStartSelect = false;
    console.log("end");
}
//设置div的鼠标监听事件-------也可以设置整个body进行监听
$(function () {
    $(".photo-well-div").mousedown(function () {
        MouseDown();
    }).mouseup(function () {
        MouseUp();
    });
})
//设置经过图片的容器div 的时候鼠标move事件（photo-item是容器div）
$(function () {
    $(".photo-item").mousemove(function () {
        if (bStartSelect) {
            SelectMe($(this));
        }
    });
})
//设置鼠标经过图片的时候（以防万一，设置经过图片 photo-img 是图片的类）
$(function () {
    $(".photo-img").mousemove(function () {
        if (bStartSelect) {
            SelectMe($(this).parent());
        }
    });
})
//设置选中图片（也就是选中checbox）
//找到没有选中的图片进行click操作
function SelectMe(photoDiv) {
    $(photoDiv).find(".photo-selector:not(:checked)").click();
    MouseSelected();
}
//-----------------------------------------------
//鼠标选中事件
function MouseSelected() {
    var tmpSelectedPhotoList=[];//每次选中都滞空后在进行选择
    var count=0;
    $(".photo-selector:checked").each(
        function (index, item) {
            tmpSelectedPhotoList[count]=$(item).attr("GUID");
            count++;
            //获取存储在checkbox 的attrGUID，或者获取attr的val值都可以
        }
    );
    cSelectedPhotoList=tmpSelectedPhotoList;
    setVarShow();//每次的选中都对DOM进行显示的操作
}
//清楚所有的选择
function ClearAllSelect() {
    $(".photo-selector").attr("checked", false);
    cSelectedPhotoList=[];
    setVarShow();
}
//全选功能
function SelectAllSelect() {
    ClearAllSelect();   //先清空在选中
    $(".photo-selector").click();
    MouseSelected();
}
//设置内容显示---使用两个全局变量的函数
function setVarShow(){
    $(".select-length").text(cSelectedPhotoList.length);
    $(".select-list").text(cSelectedPhotoList);
}
Powered by postbird . ©2016