IE、Firefox 可移動Div，但無法多選 Div 文字一起移動、及指定文字大小

javascript

makey 2012-03-05 09:08:33 ‧ 5372 瀏覽

請教先進們，下面有兩段 JavaScript 的程式碼。

第一段的 JavaScript 的程式碼，可以移動 Div 裡面的文字，經測試可在
IE、Firefox 兩種瀏覽器執行，但只能單獨移動 Div。

第二段的 JavaScript 程式碼，不但可以移動 Div 裡的文字，而且按Alt鍵可多選
Div 後一起移動、也可以將多選的 Div 同時指定文字大小。可是只能在 IE 瀏覽器
執行，無法在 Firefox 運作

想請問，如何修改第一段的程式碼，讓第一段能像第二段一樣：按Alt鍵可多選
Div 文字一起移動，以及將多選的文字指定文字大小(選取時出現邊框)等功能呢？

<html >

<title>移動 Div 裡面的文字(IE、Firefox) --> 可多選Div文字一起移動、指定大小(出現邊框)</title>

var currLabels = [];

var rDrag = {
o:null,

init:function(o){
o.onmousedown = this.start;
},

start:function(e){
var o;
e = rDrag.fixEvent(e);
e.preventDefault && e.preventDefault();
rDrag.o = o = this;
o.x = e.clientX - rDrag.o.offsetLeft;
o.y = e.clientY - rDrag.o.offsetTop;
document.onmousemove = rDrag.move;
document.onmouseup = rDrag.end;
},

move:function(e){
e = rDrag.fixEvent(e);
var oLeft,oTop;
oLeft = e.clientX - rDrag.o.x;
oTop = e.clientY - rDrag.o.y;
rDrag.o.style.left = oLeft + 'px';
rDrag.o.style.top = oTop + 'px';
},

end:function(e){
e = rDrag.fixEvent(e);
rDrag.o = document.onmousemove = document.onmouseup = null;
},

fixEvent: function(e){
if (!e) {
e = window.event;
e.target = e.srcElement;
e.layerX = e.offsetX;
e.layerY = e.offsetY;
}
return e;
}
}

window.onload = function(){
var obj1 = document.getElementById('draggable1');
rDrag.init(obj1);

var obj2 = document.getElementById('draggable2');
rDrag.init(obj2);

var obj3 = document.getElementById('draggable3');
rDrag.init(obj3);

}
</script>

第二段程式碼：

<title>按 Alt 鍵，對 Div 裡的 Label 文字進行多選，一起移動、改變字型大小(IE only)</title>

/*** 文字移動（滑鼠）***/

var dragapproved = false;

var z, x, y, temp1, temp2;

/*** 當前選中的所有 labels ***/

var currLabels = [];

function drags(){
if (!document.all)
return;

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(currLabels[i].style.pixelLeft);
temp2.push(currLabels[i].style.pixelTop);

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

document.onmousemove = move;
}
}
}

document.onmousedown = function(){

var el = event.srcElement;

if(el.tagName.toUpperCase() == "BODY") { // 點到空白處,重置
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(window.event.altKey){ // 如果按下 Alt 鍵,添加進去
currLabels.push(el);
}
else{
if(!isInSelected) { // 沒按下 Alt 鍵且不是之前選中的,則重選
while(currLabels.length > 0) {
chgBorder(currLabels.shift(), false);
}
currLabels = [el];
}
}

chgBorder(el, true);
event.cancelBubble = true;
drags();
}
}
}

document.onmouseup = function(){
dragapproved=false;
}

/*** 顯示邊框 ***/

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>

</form>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

fillano

iT邦超人 1 級 ‧ 2012-03-05 18:29:09

最佳解答

&lt;pre class="c" name="code">


&lt;meta http-equiv="Content-Type" content="text/html; charset=utf8">
&lt;title>按 Alt 鍵，對 Div 裡的 Label 文字進行多選，一起移動、改變字型大小(IE only)&lt;/title>
&lt;style type="text/css">
.drag{
    position:relative;
    cursor:hand;
}
&lt;/style>
&lt;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;
    }
    var event = event||window.event;
    if (event.button==button && dragapproved){
        for(var i=0; i&lt;z.length; i++){
            z[i].style.pixelLeft = temp1[i] + event.clientX - x[i];
            z[i].style.pixelTop = temp2[i] + event.clientY - y[i];
        }
        return false;
    }
}

function drags(){
/*    if (!document.all) {
        return;
    }*/
    z=[]; x=[]; y=[]; temp1=[]; temp2=[];

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

            temp1.push(currLabels[i].style.pixelLeft);
            temp2.push(currLabels[i].style.pixelTop);

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

            document.onmousemove = move;
        }
    }
}

document.onmousedown = function(event){

    var event = event||window.event;
    var el = event.srcElement;

    if(el.tagName.toUpperCase() == "BODY") {	 // 點到空白處,重置
        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&lt;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.cancelBubble = true;
            drags();
        }
    }
}

document.onmouseup = function(){
    dragapproved=false;
}

/*** 顯示邊框 ***/
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&lt;currLabels.length; i++) {
        if (currLabels[i]) {
            currLabels[i].style.fontSize = obj.value +'pt';
        }
    }
}
&lt;/script>


&lt;div id="inner01" class="Text1" style="position:absolute; z-index:5; left:300px; top:115px;" >
&lt;label id="id1" name="mycorp" class="drag" >Div_001&lt;/label>
&lt;/div>
&lt;div id="inner02" class="Text1" style="position:absolute; z-index:5; left:370px; top:175px;">
&lt;label id="id2" name="myname" class="drag" >Div_002&lt;/label>
&lt;/div>
&lt;div id="inner03" class="Text1" style="position:absolute; z-index:5; left:210px; top:205px;" >
&lt;label id="id3" name="mycorp" class="drag" >Div_003&lt;/label>
&lt;/div>
&lt;form name="R1">
&lt;select class="size" onChange="chgSize(this)" onclick="event.cancelBubble=true">
&lt;option value="8">8&lt;/option>
&lt;option value="9">9&lt;/option>
&lt;option value="10">10&lt;/option>
&lt;option value="11">11&lt;/option>
&lt;option value="12">12&lt;/option>
&lt;option value="13">13&lt;/option>
&lt;option value="14">14&lt;/option>
&lt;option value="15">15&lt;/option>
&lt;option value="16">16&lt;/option>
&lt;option value="17">17&lt;/option>
&lt;option value="18">18&lt;/option>
&lt;/select>
&lt;/form>

事件機制稍有不同，調整一下就可以動了，另外看起來event.button的定義也不一樣。

回應 9
分享
檢舉

看更多先前的回應...收起先前的回應...

fillano iT邦超人 1 級 ‧ 2012-03-05 18:31:55 檢舉

&lt;pre class="c" name="code">&lt;select class="size" onChange="chgSize(this)" onclick="event.cancelBubble=true">

這一段我沒改，不過沒影響操作。

makey iT邦新手 4 級 ‧ 2012-03-05 21:31:31 檢舉

哇! fillano 前輩的回應，真是榮幸 & 開心阿。
謝謝 fillano 前輩的指導。經測試，IE正常，
但 Firefox 還是不能移動，正努力找原因。
應該不是版本的問題吧(FF版本_3.6.27)。

fillano iT邦超人 1 級 ‧ 2012-03-05 23:58:57 檢舉

看起來是因為Firefox不認識pixelLeft跟pixelTop，把它改成left跟top來做吧（要把字串中的單位去掉，例如px）

fillano iT邦超人 1 級 ‧ 2012-03-06 15:41:41 檢舉

再補充一下好了：

event.cancelBubble在新版的Firefox上應該沒作用了，可以先偵測event是否有stopPopagation方法，然後呼叫他。

return false在新版的Firefox上可能沒辦法取消預設動作觸發，可以先偵測event是否有preventDefault方法，然後呼叫他。（這樣拖曳時，才不會選取文字）

makey iT邦新手 4 級 ‧ 2012-03-06 21:20:14 檢舉

謝謝 fillano 前輩的教導。
修正程式碼，改為 left、top，也參考幾個網站，
但可能我程度還不夠，Firefox 仍沒反應，文字能無法移動。
實在不暸問題出在哪？不過我會不斷努力測試看看的。

fillano iT邦超人 1 級 ‧ 2012-03-07 11:27:36 檢舉

在FF8/10,ie7/9,chrome17測試過可以動的版本：
https://gist.github.com/1990693

可以比較一下差在哪裡。我懶得去處理style.left, style.top，所以交給parseInt處理。手邊沒有夠「舊」的IE可以測試，所以最多到IE7（而且其實是用IE9的模擬功能），IE6以下我就不知道可不可以執行了。

makey iT邦新手 4 級 ‧ 2012-03-07 12:48:30 檢舉

這版本可以執行耶! IE6 我測試也可以呢!真是厲害!!
感謝 fillano 前輩，您真的很棒。
JavaScript 我學一年多了，基礎的還可以，但要靈活運用還要努力，
希望能像您看齊，不斷地學習、發問才能成為達人。
最後想請教 fillano 前輩，學習 JS 的好書或您的方法？
再次地謝謝您。

fillano iT邦超人 1 級 ‧ 2012-03-08 10:15:54 檢舉

其實有問題大概都是在瀏覽器實作差異，而且主要是在DOM上...Javascript本身在各個瀏覽器上的相容性問題不大。

學習喔...我都是看書或文章以後有想法，就直接寫code，測試API的功能或做概念驗證等等。測試你的例子是test772b.html...所以目前大概做了這麼多（大多數是垃圾就是了）

書的話，我想應該要看作者。Crockford、Zakas、Resig、CCK等大神都有好書，涵蓋範圍廣的話，犀牛書（Javascript: The Definite Guide）也不錯。

另外，http://www.facebook.com/groups/javascript.tw/ <-這裡有很多高手出沒，我只是小咖...

makey iT邦新手 4 級 ‧ 2012-03-08 17:42:17 檢舉

高手都有空杯的心，因此才裝的下新的東西。
謝謝 fillano 的指導與學習心得，真的收穫好多。
希望台灣科技資訊界因有大家的努力，能更上層樓!!

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙