当前位置：首页 → 问答吧 → 仿操作系统的框选功能

仿操作系统的框选功能

时间：2006-12-26

来源：互联网

base_mydrag.htm - DEMO文件，目前支持IE5.5+的框选，支持FireFox1.0+的框，选目前还未支持,有待高手们改进
prototype.js可以去google下载或者Rails网站下载,由于发贴字节数有限制，现detect.js文件有删除，完整代码请见附件.

复制PHP内容到剪贴板

PHP代码:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> new document </title>
<script src="detect.js"></script>
<script src="eventutil.js"></script>
<script src="prototype.js"></script>
<style>
* {
    margin:0;
}
#div1 {
    border:1px dashed #ccc;
    display:none;
    position:absolute;
    line-height:10px;
    height:0px;
    width:0px;
    background:#f6f6fe;
    z-index:1;
}
</style>
<script type="text/javascript">
//选区左上角坐标，选区右下角坐标
var iXlt,iXrd,iYlt,iYrd;
var ck=new Array;
function handleMouseDown() {
    var oEvent = EventUtil.getEvent();
    var oDiv = document.getElementById("div1");
    iXlt = oEvent.clientX;
    iYlt = oEvent.clientY;
    oDiv.style.display='block';
    oDiv.style.width=0;
    oDiv.style.height=0;
    var oForm = document.getElementById("form1");
    var fE = oForm.elements;
    for(i=0;i<fE.length;i++) {
        ck[i] = fE[i].checked;
    }
    var bb = document.getElementById("mm");    EventUtil.addEventHandler(bb,"mousemove",handleMouseMove);
}
function handleMouseMove() {
//检测要包含进来的checkbox.如果尺寸在里面就选中
    var oEvent = EventUtil.getEvent();
    var oDiv = document.getElementById("div1");
    var oForm = document.getElementById("form1");
    var fE = oForm.elements;
    if( (oEvent.button == 1 && isIE) || (oEvent.button == 0 && !isIE)) {
        var coor = coorTranslate(iXlt,iYlt,oEvent.clientX,oEvent.clientY);
        var t=new Array;
        var s=new Array;
        var es = new Array;
        if(Math.round(oEvent.time/100)%3==0) {
        for(i=0;i<fE.length;i++) {
            var pos = Position.cumulativeOffset(fE[i]);
            var dim = Element.getDimensions(fE[i]);
            var coor1 = coorTranslate(pos[0],pos[1],pos[0]+dim.width,pos[1]+dim.height);
            if(isAreaIn(coor1,coor)) {
                fE[i].checked = !ck[i];
            } else {
                fE[i].checked = ck[i];
            }
        }
        }
        oDiv.style.left = coor[0][0];
        oDiv.style.top = coor[1][0];
        oDiv.style.width = coor[0][1]-coor[0][0];
        oDiv.style.height = (((coor[1][1]-coor[1][0])<18)?18:coor[1][1]-coor[1][0]);

    }
}
function isAreaIn(area1,area2) {
    if(area1[0][0]>=area2[0][0] && area1[0][1]<=area2[0][1] && area1[1][0] >= area2[1][0] && area1[1][1] <= area2[1][1]) return true;
    else return false;
}
function coorTranslate(iXlt,iYlt,iXrd,iYrd) {
    var x,y;
    if( iXlt > iXrd ) {
        x = toggle(iXlt,iXrd);
    } else {
        x = [iXlt,iXrd];
    }
    if( iYlt > iYrd) {
        y = toggle(iYlt,iYrd);
    } else {
        y = [iYlt,iYrd];
    }
    return [x,y];
}
function toggle(a,b) {
    var tmp = a;
    a = b;
    b = tmp;
    return [a,b];
}
function handleMouseUp() {
    var oEvent = EventUtil.getEvent();
    var oDiv = document.getElementById("div1");
    iXrd = oEvent.clientX;
    iYrd = oEvent.clientY;
    oDiv.style.display = 'none';
    var bb = document.getElementById("mm");
    EventUtil.removeEventHandler(bb,"mousemove",handleMouseMove);
}
EventUtil.addEventHandler(window,"load",function() {
    var bb = document.getElementById("mm");
    EventUtil.addEventHandler(bb,"mousedown",handleMouseDown);
    EventUtil.addEventHandler(bb,"mousemove",handleMouseMove);
    EventUtil.addEventHandler(bb,"mouseup",handleMouseUp);
});
</script>
</head>
<body id="mm" onselectstart="return false;">
<div>
<div id="div1">
</div>
<form id="form1">
<table style="z-index:10;position:absolute;width:80%;margin:20px;" border=1>
    <thead>
        <tr><th> </th><th>Name</th><th>Address</th></tr>
    </thead>
    <tbody>
        <tr><td><input type="checkbox" name="vv" />1</td><td>Jack</td><td>上海长宁区中山公园</td> </tr>
        <tr><td><input type="checkbox" name="vv" />1</td><td>Jack</td><td>上海长宁区中山公园</td> </tr>
        <tr><td><input type="checkbox" name="vv" />1</td><td>Jack</td><td>上海长宁区中山公园</td> </tr>
    </tbody>
</table>
</form>
</div>
<div id="info" style="position:absolute;top:250px;"></div>
</body>
</html>

detect.js - 检测浏览器和操作系统，摘自<Professional.JavaScript.For.Web.Developers>，以下代码均摘自该书

复制PHP内容到剪贴板

PHP代码:

eventutil.js - 事件控制

复制PHP内容到剪贴板

PHP代码:

[ 本帖最后由 thankwsx 于 2006-12-27 09:16 编辑 ]

作者: thankwsx 发布时间: 2006-12-26

帮顶

作者: leehui1983 发布时间: 2006-12-26

讨论的欢迎，
帮顶的，

也欢迎。

作者: thankwsx 发布时间: 2006-12-26

作者: leehui1983 发布时间: 2006-12-26

作者: kenus 发布时间: 2006-12-27

支持

作者: cator 发布时间: 2006-12-27

作者: leehui1983 发布时间: 2006-12-27

老大们，你们能不能提一些实质性的建议，我一个朋友说框选没有实质意义，只是一个噱头。
我认为可以给用户带来更好的用户体验。
比如，我在网上看到有PHP的网络文件管理系统，AJAX也用到了，就是没有提供完全类似操作系统的那种框选拖动功能，当然有些网站早就已拖动为噱头了，不过框选的我还真没看到，如果有同学见过类似的网站，还望告诉我。

作者: thankwsx 发布时间: 2006-12-27

仿操作系统的框选功能

PHP代码:

PHP代码:

PHP代码:

热门阅读

热门下载