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

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
study:javascript:jquery:z-index [2010/10/11 09:06] – 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{
  width: 300px;  width: 300px;
- height: 250px;+ height: 240px;
  background-color:#8888ff;  background-color:#8888ff;
  position: absolute;  position: absolute;
行 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(){dragMove();}); +
-            $(document).mouseup(function(){dragOff();}); +
-        }); +
- //ドラッグ開始 +
- 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: 50px; top: 250px;">+<div id="block" class="sample" style="left: 150px; top: 250px;">
 マウスでドラッグができます。<br /> マウスでドラッグができます。<br />
 width: 300px;<br /> width: 300px;<br />
-height: 200px;<br />+height: 240px;<br />
 background-color: #8888ff;<br /> background-color: #8888ff;<br />
 position: absolute;<br /> position: absolute;<br />
 padding: 10px;<br /> padding: 10px;<br />
 <b>z-index: 100;</b><br /> <b>z-index: 100;</b><br />
-left: 50px;<br />+left: 150px;<br />
 top: 250px;<br /> top: 250px;<br />
 <br /> <br />
行 125: 行 75:
 \\ \\
 \\ \\
 +\\ 
 +\\ 
 +\\ 
 +\\ 
 +\\ 
 +\\
  
  
行 147: 行 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: 独自のプラグインを作成する]]
  
  

トレース: • prevent_paste

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