討論區快速選單
知識庫快速選單
網路投保旅行平安險 軟體開發過程中有哪些資安漏洞? 掌握Salesforce雲端管理秘訣
[ 回上頁 ] [ 討論區發言規則 ]
IE、Firefox 可移動Div,但無法多選 Div 文字一起移動、及指定文字大小
更改我的閱讀文章字型大小
作者 : picard(picard)
[ 貼文 21 | 人氣 3 | 評價 80 | 評價/貼文 3.81 | 送出評價 0 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2012/3/2 下午 01:37:54
請教先進們,下面有兩段 JavaScript 的程式碼。

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

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

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


第一段程式碼:


<html >

<head>

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


<style type="text/css">
    .draggable{
     font-size:10pt;
     width:120px; height:25px;
     position:absolute; cursor:pointer;
    }
</style>
    
<script type="text/javascript">
    
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>
   
</head>

<body>
   <div id="draggable1" class="draggable" style="position:absolute; z-index:5; left:300px; top:115px;">DIV_001</div>
   <div id="draggable2" class="draggable" style="position:absolute; z-index:5; left:370px; top:175px;">DIV_002</div>
   <div id="draggable3" class="draggable" style="position:absolute; z-index:5; left:210px; top:205px;">DIV_003</div>
</body>

</html>



第二段程式碼:



<html>

<head>

   <meta http-equiv="Content-type" content="text/html; charset=big5">

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

   <style type="text/css">
     .drag{
     position:relative;
     cursor:hand;
     }
   </style>

   <script type="text/javascript">

     /*** 文字移動(滑鼠)***/

     var dragapproved = false;

     var z, x, y, temp1, temp2;


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

     var currLabels = [];


     function move(){
     if (event.button==1 && dragapproved){
     for(var i=0; i<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<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>

</head>


<body onload="chgFonts();">


   <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)" onclick="event.cancelBubble=true">
     <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>
作者 : ynioba(YnioBa)
[ 貼文 50 | 人氣 0 | 評價 480 | 評價/貼文 9.6 | 送出評價 0 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2012/4/26 下午 06:19:49
整版的code看得頭好大,最近一直在學習jQuery,覺得你的這個要求很有意思,於是按照你的要求,用jQuery寫了一個。
以下內容完全原創:

<script type="text/javascript">
 
    $(function () {
     //滑鼠是否按下
     var _mouseClick = false;
     //alt是否按下
     var _altClick = false;
     //div集合
     var divarray = new Array();

     //檢測頁面是否有按鍵按下
     $(document).keydown(function (e) {
     e = e || event;
     //如果是alt鍵則設定個標記
     if (e.keyCode = 18) {
     _altClick = true;
     }
     });

     //檢測頁面是否有按鍵彈起
     $(document).keyup(function (e) {
     e = e || event;
     //如果是alt鍵則清除標記
     if (e.keyCode = 18) {
     _altClick = false;
     }
     });


     //如果在div上按下了滑鼠
     $(".drag").mousedown(function (e) {
     _mouseClick = true;

     //如果是按著alt鍵按的滑鼠,則逐個把div的id內容加入集合
     if (_altClick) {
     var divIndex = $.inArray($(this).attr("id"), divarray);
     if (divIndex == -1) {
     $(this).css("border", "1px solid Black");
     divarray.push($(this).attr("id"));
     }

     //記住每個div的起始位置
     $(".drag").each(function () {

     var divIndex = $.inArray($(this).attr("id"), divarray);
     if (divIndex != -1) {
     $(this).attr("_x", e.pageX - parseInt($(this).css("left")));
     $(this).attr("_y", e.pageY - parseInt($(this).css("top")));
     $(this).fadeTo(20, 0.5);
     }

     });
     } else {
     //如果沒有按住alt鍵,則清空div集合把當前按下的div加入集合
     //實際上,單個div和多個div處理是一樣的,單個只是個特例,難道不是嗎?
     divarray = [];
     $(".drag").each(function () {
     $(this).css("border", "");
     });

     $(this).css("border", "1px solid Black");
     divarray.push($(this).attr("id"));

     $(this).attr("_x", e.pageX - parseInt($(this).css("left")));
     $(this).attr("_y", e.pageY - parseInt($(this).css("top")));
     $(this).fadeTo(20, 0.5);
     // });
     }
     });

     //當滑鼠在頁面上移動的時候
     $(document).mousemove(function (e) {
     if (_mouseClick) {
     $(".drag").each(function () {

     //找到記住的div,並移動它
     var divIndex = $.inArray($(this).attr("id"), divarray);
     if (divIndex != -1) {
     var x = e.pageX - $(this).attr("_x");
     var y = e.pageY - $(this).attr("_y");
     $(this).css({ top: y, left: x });
     }

     });
     }

     });

     //當滑鼠彈起按鍵的時候,把標誌位
     $(document).mouseup(function () {
     _mouseClick = false;
     $(".drag").fadeTo("fast", 1);
     });
    });

</script>
 
<div id="div1" style="position: absolute; left: 0px; top: 150px; background-color: Red;
    width: 100px; height: 200px;" class="drag">
    div111111
</div>
<div id="div2" style="position: absolute; left: 200px; top: 300px; background-color: Red;
    width: 100px; height: 400px;" class="drag">
    div22222
</div>
<div id="div3" style="position: absolute; left: 400px; top: 450px; background-color: Red;
    width: 100px; height: 600px;" class="drag">
    div3333
</div>

測試環境為:ASP.NET MVC3,jQuery版本是1.5.2,測試瀏覽器為:IE9/Chrome/Firefox
除了IE9有個小bug,無法解決之外,其他的兩個瀏覽器均正常。
在IE9下,如果你隱藏IE9的menu,則按下alt鍵的時候,IE9會把menu顯示出來並直接return,這個時候,頁面完全無法檢測到alt鍵彈起或者按下。想了很久也不知道怎麼解決,要麼把alt換成ctrl鍵,要麼就忍,不過會給customer很不好的體驗。
作者 : ynioba(YnioBa)
[ 貼文 50 | 人氣 0 | 評價 480 | 評價/貼文 9.6 | 送出評價 0 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2012/4/26 下午 06:29:14
如果要改變選擇的div的字體大小,就更簡單了,在
<script type="text/javascript">

    $(function () {

後面加入:

     $("#changeFontSize").change(function () {
     $(".drag").each(function () {
     var divIndex = $.inArray($(this).attr("id"), divarray);
     if (divIndex != -1) {
     var newFontSize = $("#changeFontSize").find("option:selected").text();
     $(this).css("font-size", newFontSize);
     }

     });
     });

然後添加一個select元素到頁面:
<select id="changeFontSize">
    <option>10</option>
    <option>20</option>
    <option>30</option>
</select>

以上程式未經測試,不過我覺得原理就是這樣,比較簡單,你自己debug一下即可。
 板主 : Clark
 > Java Script - 討論區
 - 最近熱門問答精華集
 - 全部歷史問答精華集
 - Java Script - 知識庫
  ■ 全站最新Post列表
  ■ 我的文章收藏
  ■ 我最愛的作者
  ■ 全站文章收藏排行榜
  ■ 全站最愛作者排行榜
  ■  月熱門主題
  ■  季熱門主題
  ■  熱門主題Top 20
  ■  本區Post排行榜
  ■  本區評價排行榜
  ■  全站專家名人榜
  ■  全站Post排行榜
  ■  全站評價排行榜
  ■  全站人氣排行榜
 請輸入關鍵字 
  開始搜尋
 
Top 10
評價排行
Java Script
1 Snaking 1420 
2 jer 1140 
3 foolface 1080 
4 Clark 970 
5 Milx 960 
6 羅蘋 780 
7 艾里克斯 710 
8 abgne 600 
9 Fillano 500 
10 YnioBa 480 
Java Script
  專家等級 評價  
  一代宗師 10000  
  曠世奇才 5000  
  頂尖高手 3000  
  卓越專家 1500  
  優秀好手 750  
Microsoft Internet Explorer 6.0. Screen 1024x768 pixel. High Color (16 bit).
2000-2019 程式設計俱樂部 http://www.programmer-club.com.tw/
0.125