Writing /volume1/Web/Public/dokuwiki/data/log/deprecated/2024-11-15.log failed

現在位置: start » study » javascript » jquery » z-index

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
study:javascript:jquery:z-index [2010/10/11 09:16] – bananastudy:javascript:jquery:z-index [2010/10/16 10:21] (現在) – banana
行 9: 行 9:
 <head> <head>
 <script type="text/javascript" src="./test/js/jquery-1.4.2.js"></script> <script type="text/javascript" src="./test/js/jquery-1.4.2.js"></script>
 +<script type="text/javascript" src="./test/js/jquery.draggable.js"></script>
 <style type="text/css"> <style type="text/css">
  div.sample{  div.sample{
行 32: 行 33:
  }  }
 </style> </style>
-<script language="JavaScript"><!-- +<script language="JavaScript"> 
- var dragItem = null; +<!-- 
- var initEventX, initEventY; +      $(function(){ 
- var initLeft, initTop; +          $("#block").draggable(); 
-  +      });
-        //初期化処理 +
-        $(function(){ +
-            $(document).mousemove(function(e){dragMove(e);}); +
-            $(document).mouseup(function(e){dragOff(e);}); +
-        }); +
-  +
-        //ドラッグ開始 +
- function dragOn(obj, e){ +
-     var src = e.originalTarget; +
-     if(document.all){ +
- e = event; +
- src = e.srcElement; +
-     } +
- +
-     dragItem = obj; +
-     initEventX = e.screenX; +
-     initEventY = e.screenY; +
-     initLeft = parseInt(dragItem.style.left.replace('px', '')); +
-     initTop = parseInt(dragItem.style.top.replace('px', '')); +
-     return false; +
- } +
- +
- //ドラッグ停止 +
- function dragOff(e){ +
-     dragItem = null; +
- } +
- +
- //ドラッグ移動 +
- function dragMove(e){ +
-     if(document.all)e = event; +
-     if(!e || !dragItem) +
- return; +
-            dragItem.style.left = (initLeft + e.screenX - initEventX) + 'px'; +
-     dragItem.style.top = (initTop + e.screenY - initEventY) + 'px'; +
-            setShim(dragItem); +
-     return false; +
- } +
- +
- //shimの設定 +
- function setShim(obj){ +
-          var shim = $('shim'); +
- +
-     //objと位置、サイズを合わせる +
-            shim.css({left:obj.style.left, top:obj.style.top}); +
-            shim.css({width:obj.offsetWidth, height:obj.offsetHeight}); +
-        shim.css("visibility","visible"); +
-        } +
 // --> // -->
 </script> </script>
行 91: 行 44:
 <iframe scrolling="no" frameborder="0" id="shim"></iframe> <iframe scrolling="no" frameborder="0" id="shim"></iframe>
 IE6でselectタグ(プルダウン)がz-indexを無視する対策  IE6でselectタグ(プルダウン)がz-indexを無視する対策 
-<div onmousedown="dragOn(this, event);" class="sample" style="left: 150px; top: 420px;">+<div id="block" class="sample" style="left: 150px; top: 250px;">
 マウスでドラッグができます。<br /> マウスでドラッグができます。<br />
 width: 300px;<br /> width: 300px;<br />
行 100: 行 53:
 <b>z-index: 100;</b><br /> <b>z-index: 100;</b><br />
 left: 150px;<br /> left: 150px;<br />
-top: 420px;<br />+top: 250px;<br />
 <br /> <br />
 移動するたびに、setShim関数でこのdivにiframeを重ねています。<br /> 移動するたびに、setShim関数でこのdivにiframeを重ねています。<br />
行 149: 行 102:
 ===== reference ===== ===== reference =====
   - [[http://www.programming-magic.com/20071107222415/|IE6でselectタグ(プルダウン)がz-indexを無視する対策]]   - [[http://www.programming-magic.com/20071107222415/|IE6でselectタグ(プルダウン)がz-indexを無視する対策]]
 +  - [[http://www.ibm.com/developerworks/jp/web/library/wa-aj-jquery6/|jQuery: 独自のプラグインを作成する]]
  
  

トレース:

QR Code
QR Code study:javascript:jquery:z-index (generated for current page)