fillano/test772b.html

## test772b.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>按 Alt 鍵，對 Div 裡的 Label 文字進行多選，一起移動、改變字型大小(IE only)</title>
<style type="text/css">
.drag{
    position:relative;
    cursor:pointer;
    cursor:hand\9;
}
.Text1 {
    border: dotted 1px gray;
}
</style>
<script type="text/javascript">
/*** 文字移動（滑鼠）***/
var dragapproved = false;

var z, x, y, temp1, temp2;

/*** 當前選中的所有 labels ***/
var currLabels = [];

function move(event){
    if(event) {
        var button = 0,event = event;
    } else {
        var button = 1,event = window.event;
    }
    if (event.button==button && dragapproved){

        for(var i=0; i<z.length; i++){
            z[i].style.left = (temp1[i]? temp1[i]:0) + event.clientX - x[i] + 'px';
            z[i].style.top = (temp2[i]? temp2[i]:0) + event.clientY - y[i] + 'px';
        }
    }
    return false;
}

function drags(event){
    z=[]; x=[]; y=[]; temp1=[]; temp2=[];

    for(var i=0; i<currLabels.length; i++) {
        if (currLabels[i] && currLabels[i].className=="drag"){
            dragapproved = true;
            z.push(currLabels[i]);

            temp1.push(parseInt(currLabels[i].style.left,10));
            temp2.push(parseInt(currLabels[i].style.top,10));

            x.push(event.clientX);
            y.push(event.clientY);

            document.onmousemove = move;
        }
    }
    return false;
}

document.onmousedown = function(event){
    var event = event||window.event;
    var el = event.srcElement||event.target;
    if(el.tagName.toUpperCase() == "BODY" || el.tagName.toUpperCase() == "HTML" ) {	 // 點到空白處,重置
        while(currLabels.length > 0) {
            chgBorder(currLabels.shift(), false);
        }
    }
    else{
        if(el.className && el.className=="drag") {	 // 點到可以托拽的label上
            var isInSelected = false;	 // 此label是否已經被包含

            for(var i=0; i<currLabels.length; i++) {
                if(el == currLabels[i]) {
                    isInSelected = true;
                    break;
                }
            }
            if(event.altKey){	 // 如果按下 Alt 鍵,添加進去
                currLabels.push(el);
            }
            else{
                if(!isInSelected) {	 // 沒按下 Alt 鍵且不是之前選中的,則重選
                    while(currLabels.length > 0) {
                        chgBorder(currLabels.shift(), false);
                    }
                    currLabels = [el];
                }
            }
            chgBorder(el, true);
            event.cancelBuble = true;
            if(event.stopPopragation) event.stopPopragation();
            if(event.preventDefault) event.preventDefault();
            return drags(event);
        }
    }
}

document.onmouseup = function(){
    dragapproved=false;
    document.onmousemove = null;//不影響功能
}

/*** 顯示邊框 ***/
function chgBorder(obj, b){
    if(obj && obj.style){
        if(b){
            obj.style.border = "1px solid Lime";
        }
        else{
            obj.style.border = "";
        }
    }
}

/*** 改變文字大小（單位：pt）***/
function chgSize(obj){
    for(var i=0; i<currLabels.length; i++) {
        if (currLabels[i]) {
            currLabels[i].style.fontSize = obj.value +'pt';
        }
    }
}
</script>
</head>
<body>
<div id="inner01" class="Text1" style="position:absolute; z-index:5; left:300px; top:115px;" >
<label id="id1" name="mycorp" class="drag" >Div_001</label>
</div>
<div id="inner02" class="Text1" style="position:absolute; z-index:5; left:370px; top:175px;">
<label id="id2" name="myname" class="drag" >Div_002</label>
</div>
<div id="inner03" class="Text1" style="position:absolute; z-index:5; left:210px; top:205px;" >
<label id="id3" name="mycorp" class="drag" >Div_003</label>
</div>
<form name="R1">
<select class="size" onChange="chgSize(this)">
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
</form>
</body>
</html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8">
	<title>按 Alt 鍵，對 Div 裡的 Label 文字進行多選，一起移動、改變字型大小(IE only)</title>
	<style type="text/css">
	.drag{
	position:relative;
	cursor:pointer;
	cursor:hand\9;
	}
	.Text1 {
	border: dotted 1px gray;
	}
	</style>
	<script type="text/javascript">
	/* 文字移動（滑鼠）*/
	var dragapproved = false;

	var z, x, y, temp1, temp2;

	/* 當前選中的所有 labels */
	var currLabels = [];

	function move(event){
	if(event) {
	var button = 0,event = event;
	} else {
	var button = 1,event = window.event;
	}
	if (event.button==button && dragapproved){

	for(var i=0; i<z.length; i++){
	z[i].style.left = (temp1[i]? temp1[i]:0) + event.clientX - x[i] + 'px';
	z[i].style.top = (temp2[i]? temp2[i]:0) + event.clientY - y[i] + 'px';
	}
	}
	return false;
	}

	function drags(event){
	z=[]; x=[]; y=[]; temp1=[]; temp2=[];

	for(var i=0; i<currLabels.length; i++) {
	if (currLabels[i] && currLabels[i].className=="drag"){
	dragapproved = true;
	z.push(currLabels[i]);

	temp1.push(parseInt(currLabels[i].style.left,10));
	temp2.push(parseInt(currLabels[i].style.top,10));

	x.push(event.clientX);
	y.push(event.clientY);

	document.onmousemove = move;
	}
	}
	return false;
	}

	document.onmousedown = function(event){
	var event = event\|\|window.event;
	var el = event.srcElement\|\|event.target;
	if(el.tagName.toUpperCase() == "BODY" \|\| el.tagName.toUpperCase() == "HTML" ) { // 點到空白處,重置
	while(currLabels.length > 0) {
	chgBorder(currLabels.shift(), false);
	}
	}
	else{
	if(el.className && el.className=="drag") { // 點到可以托拽的label上
	var isInSelected = false; // 此label是否已經被包含

	for(var i=0; i<currLabels.length; i++) {
	if(el == currLabels[i]) {
	isInSelected = true;
	break;
	}
	}
	if(event.altKey){ // 如果按下 Alt 鍵,添加進去
	currLabels.push(el);
	}
	else{
	if(!isInSelected) { // 沒按下 Alt 鍵且不是之前選中的,則重選
	while(currLabels.length > 0) {
	chgBorder(currLabels.shift(), false);
	}
	currLabels = [el];
	}
	}
	chgBorder(el, true);
	event.cancelBuble = true;
	if(event.stopPopragation) event.stopPopragation();
	if(event.preventDefault) event.preventDefault();
	return drags(event);
	}
	}
	}

	document.onmouseup = function(){
	dragapproved=false;
	document.onmousemove = null;//不影響功能
	}

	/* 顯示邊框 */
	function chgBorder(obj, b){
	if(obj && obj.style){
	if(b){
	obj.style.border = "1px solid Lime";
	}
	else{
	obj.style.border = "";
	}
	}
	}

	/* 改變文字大小（單位：pt）*/
	function chgSize(obj){
	for(var i=0; i<currLabels.length; i++) {
	if (currLabels[i]) {
	currLabels[i].style.fontSize = obj.value +'pt';
	}
	}
	}
	</script>
	</head>
	<body>
	<div id="inner01" class="Text1" style="position:absolute; z-index:5; left:300px; top:115px;" >
	<label id="id1" name="mycorp" class="drag" >Div_001</label>
	</div>
	<div id="inner02" class="Text1" style="position:absolute; z-index:5; left:370px; top:175px;">
	<label id="id2" name="myname" class="drag" >Div_002</label>
	</div>
	<div id="inner03" class="Text1" style="position:absolute; z-index:5; left:210px; top:205px;" >
	<label id="id3" name="mycorp" class="drag" >Div_003</label>
	</div>
	<form name="R1">
	<select class="size" onChange="chgSize(this)">
	<option value="8">8</option>
	<option value="9">9</option>
	<option value="10">10</option>
	<option value="11">11</option>
	<option value="12">12</option>
	<option value="13">13</option>
	<option value="14">14</option>
	<option value="15">15</option>
	<option value="16">16</option>
	<option value="17">17</option>
	<option value="18">18</option>
	</select>
	</form>
	</body>
	</html>