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:12] – 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.style.left = obj.style.left; +
- shim.style.top = obj.style.top; +
- shim.style.width = obj.offsetWidth; +
-    shim.style.height = obj.offsetHeight; +
-    shim.style.display = 'block'; +
- } +
 // --> // -->
 </script> </script>
行 94: 行 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 />
行 103: 行 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 />
行 152: 行 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)