效果

样式
.drag-box {
background: #bad5ff;
width: 0px;
height: 0px;
position: absolute;
opacity: 0.3;
cursor: move;
}
//判断两个元素是否重叠
function isOverlap(obj1, obj2) {
    var x1 = obj1.offset().left
    var y1 = obj1.offset().top
    var x2 = x1 + obj1.width()
    var y2 = y1 + obj1.height()
    var x3 = obj2.offset().left
    var y3 = obj2.offset().top
    var x4 = x3 + obj2.width()
    var y4 = y3 + obj2.height()
    return x3 < x2 && x4 > x1 && y1 < y4 && y2 > y3
}

//设置资源浏览器中鼠标拖拽
function setExplorerMounseDrag() {

// startX, startY 为鼠标点击时初始坐标
var startX, startY
// 是否拖动，初始为 false
var dragging = false;

//要绑定这个拖拽功能的区域
$('.right-main-filelist').mousedown(function (e) {
//是否为左键点击
if (e.which != 1)
return false
//只有点击空白处在触发拖拽
if (e.target.className != 'right-main-filelist')
return false
//获取鼠标位置
startX = e.pageX;
startY = e.pageY;

//鼠标点击时 在鼠标位置创建个div元素 然后设置其位置为鼠标当前位置
// 在页面创建 box
var active_box = document.createElement("div");
active_box.id = "active_box";
active_box.className = "drag-box";
active_box.style.top = startY + 'px';
active_box.style.left = startX + 'px';
document.body.appendChild(active_box);
//设置为开启拖拽
dragging = true
})

//要绑定到document，不然鼠标到浏览器外就触发不了了 会有问题
$(document).mousemove(function (e) {
var ab = document.getElementById("active_box");
if (isEmpty(ab) || !dragging)
return false
//这个是限制这个拖拽区域的范围 看实际情况调整
//防止超过文件列表界面
if (e.pageY < $('.right-main-filelist').offset().top
|| e.pageX < $('.right-main-filelist').offset().left
|| e.pageX > $(window).width() - 20
|| e.pageY > $(window).height() - 50
)
return false

//往左上方拖动时
if (e.pageX < startX && e.pageY < startY) {
ab.style.top = e.pageY + 'px'
ab.style.left = e.pageX + 'px'
ab.style.width = startX - e.pageX + 'px';
ab.style.height = startY - e.pageY + 'px';
}

//左下方拖动时
if (e.pageX < startX && e.pageY > startY) {
ab.style.top = startY + 'px';
ab.style.left = e.pageX + 'px';
ab.style.width = startX - e.pageX + 'px';
ab.style.height = e.pageY - startY + 'px';
}

//右上方拖动时
if (e.pageX > startX && e.pageY < startY) {
ab.style.top = e.pageY + 'px';
ab.style.left = startX + 'px';
ab.style.width = e.pageX - startX + 'px';
ab.style.height = startY - e.pageY + 'px';
}

//右下方拖动时
if (e.pageX > startX && e.pageY > startY) {
ab.style.top = startY + 'px';
ab.style.left = startX + 'px';
ab.style.width = e.pageX - startX + 'px';
ab.style.height = e.pageY - startY + 'px';

}

})

//鼠标抬起时
$(document).mouseup(function (e) {
if (!dragging)
return
//下面这个是遍历要想要被选取区域 选取的对象
$(".right-main-filelist .file").removeClass('select').children('.ico-select').children('i').hide()
$('.right-main-filelist .file').each(function (i, ctrl) {
//判断是否被选取中 也就是判断两个元素是否相重叠
if (isOverlap($('#active_box'), $(ctrl))) {
$(ctrl).children('.ico-select').children('i').show()
$(ctrl).addClass('select')
}
})
//清除生成的选取区域div
$('body').children('#active_box').remove()
dragging = false;

})
}