JavaScriptでマウスドラッグできる簡単な仕掛けを実装しようと思ってるのですが、
IEでドラッグした場合、ドラッグするレイヤーより重ね順(Z-INDEX値)が下にあるものを通過するときに、
その下にあるレイヤーを選択してしまい、ドラッグする動作速度が非常に鈍くなってしまいます。
NNでは選択することなくスムーズにドラッグできます。

少し言葉では表現しにくい症状なので、上手く伝えることができませんが、
どなたか解決法の分かる方がいらっしゃいましたら教えて下さい。
何か質問の補足が必要であれば補足致します。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

どのようなスクリプトでドラッグを実装されていますか?


通常ドラッグを実装する際は、マウスの動きのスピードの方がレイヤーの座標の指定よりも早くなりますので、現在のマウス座標から毎回レイヤーを選択するような動作だと、遅くなります。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

QNN4とNN6でのレイヤーの表示・非表示

WINとMACでNN4とNN6でのレイヤーの表示・非表示を制御する、そんな都合の良いJavaScriptってありますか?
あったら教えて下さい!!

Aベストアンサー

以下は、私が使っていたものを、そのまま写しています。

function ShowMessage(mID){
if(document.all) document.all(mID).style.visibility = 'visible';
else if(document.layers) document.layers[mID].visibility = true;
else if(document.getElementById) document.getElementById(mID).style.visib
ility = 'visible';
}

function HideMessage(mID){
if(document.all) document.all(mID).style.visibility = 'hidden';
else if(document.layers) document.layers[mID].visibility = false;
else if(document.getElementById) document.getElementById(mID).style.visib
ility = 'hidden';
}

おわかりだとは思いますが、mIDは、各レイヤーのIDです。
引数にして渡してやってください。

ちなみに、Netscape6.0以降は、document.layersはFALSEになってしまいます。
そこで、document.getElementByIdを使うのですが、これはIE5.0以上でもTRUEになってしまいます。
(だから elseを使っているんですが)

Netscapeは、4.x以前と6.0以降でまったく別物になっているので、
同じ処理はほとんどの場合使えません。
むしろ、6.0はIE5.x以降にかなり近いです。

WINとMACの違いは、ブラウザの細かい仕様とバグに関わってくるので、
あんまり気にしても仕方がないような。。。

以下は、私が使っていたものを、そのまま写しています。

function ShowMessage(mID){
if(document.all) document.all(mID).style.visibility = 'visible';
else if(document.layers) document.layers[mID].visibility = true;
else if(document.getElementById) document.getElementById(mID).style.visib
ility = 'visible';
}

function HideMessage(mID){
if(document.all) document.all(mID).style.visibility = 'hidden';
else i...続きを読む

Qストリートビューの実装方法と、アマゾンのトップページにあるリング状の選択ボックスの実装方法について

いつもお世話になっています。
過去ログをあさってみたのですが見つけられなかったので質問します。

二点あります。

1.googleストリートビューのような、360度回転できる機能はどのライブラリを用いて実装されているのでしょうか?複数の写真を撮り、Ajaxで読み込み表示しているのだろう、ということはわかるのですが、写真と写真のつなぎ目がないし、単に写真をつないだだけではなくて、写真画像を変形させてつないでいるようにも見えます(いろいろ調べてみると、この機能自体はずいぶん昔からあったようですね。ホテルの内装とかを見やすくするために導入されていたりしたようです)。

2.アマゾンのトップページをなんどかリロードすると、奥行きのあるドーナツ状に商品画像が並んでいて、それを回転させることができます。
これはどのライブラリで実現しているのでしょうか?
ソースを見ると、該当する場所は
<div class="asinTextBlock">
<p class="seeMore">
<span class="carat">
のようになっている?ようなのですが、追いきれません。。

まだまだ未熟なのですが、志を高く勉強して行きたいので、どのライブラリで実現できるのか、またはライブラリなしで可能なのか、アマゾンオリジナルのライブラリを使用しているのか、、教えてください。

よろしくお願いいたします。

いつもお世話になっています。
過去ログをあさってみたのですが見つけられなかったので質問します。

二点あります。

1.googleストリートビューのような、360度回転できる機能はどのライブラリを用いて実装されているのでしょうか?複数の写真を撮り、Ajaxで読み込み表示しているのだろう、ということはわかるのですが、写真と写真のつなぎ目がないし、単に写真をつないだだけではなくて、写真画像を変形させてつないでいるようにも見えます(いろいろ調べてみると、この機能自体はずいぶん昔からあったよう...続きを読む

Aベストアンサー

ちょっといじっているうちに、はまってきた!
<html>
<head>
<style>
</style>
<script>
var x=[],y=[],b=[],o=[],n=[];
var sp=1;
setInterval(c,50);
window.onload=function(){
for(i=0;i<=360;i++){
zx=Math.sin(i*3.14159/180)*300;
zz=Math.cos(i*3.14159/180)*300;
zy=-150;
zk=(1000-zz)/800;
x[i]=251-zx/zk;
y[i]=-zy/zk-80;
b[i]=((700+zz)/1000)*120|0;
}
o=document.getElementById('a').getElementsByTagName('img');
p=(360/o.length)|0;
for(var i=0,m=o.length;i<m;i++){
o[i].style.position='absolute';
o[i].style.top=y[p*i];
o[i].style.left=x[p*i];
n[i]=p*i;
}
}

function c(){
for(i=0;i<o.length;i++){
o[i].style.left=x[n[i]];
o[i].style.top =y[n[i]];
o[i].style.width =b[n[i]];
o[i].style.height=b[n[i]];
o[i].style.zIndex=b[n[i]];
n[i]=(sp+n[i])%360;
}
}

</script>
</head>
<body>
<div id="a" style="width:600px;height:230px;border:1px #080 solid;position:absolute;top:50px;">
<input type="button" value="回転" onClick="sp=1;">
<input type="button" value="停止" onClick="sp=0;">
<img src="./img/0.gif" width=120" height="120" alt="ぐ~ぐるに!" onClick="location.href='http://www.google.co.jp/webhp?complete=1&hl=ja'">
<img src="./img/1.gif" width=120" height="120" alt="2">
<img src="./img/2.gif" width=120" height="120" alt="3">
<img src="./img/3.gif" width=120" height="120" alt="4">
<img src="./img/4.gif" width=120" height="120" alt="5">
<img src="./img/5.gif" width=120" height="120" alt="6">
<img src="./img/6.gif" width=120" height="120" alt="7">
<img src="./img/7.gif" width=120" height="120" alt="8">
<img src="./img/8.gif" width=120" height="120" alt="9">
<img src="./img/9.gif" width=120" height="120" alt="10">
</div>
</body>
</html>

ちょっといじっているうちに、はまってきた!
<html>
<head>
<style>
</style>
<script>
var x=[],y=[],b=[],o=[],n=[];
var sp=1;
setInterval(c,50);
window.onload=function(){
for(i=0;i<=360;i++){
zx=Math.sin(i*3.14159/180)*300;
zz=Math.cos(i*3.14159/180)*300;
zy=-150;
zk=(1000-zz)/800;
x[i]=251-zx/zk;
y[i]=-zy/zk-80;
b[i]=((700+zz)/1000)*120|0;
}
o=document.getElementById('a').getElementsByTagName('img');
p=(360/o.length)|0;
for(var i=0,m=o.length;i<m;i++){
...続きを読む

QNN7.0でレイヤーの表示・非表示

レイヤーの表示・非表示のスクリプトなんですが、

function OpenLayer()
{
//NNの場合
if(document.layers)
{
document.content_menu.visibility="visible";
}
//IEの場合
else
{
content_menu.style.visibility="visible";
}
}
function CloseLayer()
{
//NNの場合
if(document.layers)
{
document.content_menu.visibility="hidden";
}
//IEの場合
else
{
content_menu.style.visibility="hidden";
}
}

に書きました。
IE6.0では動作しますがNN7.0では何も起こりません。
どなたかどのように表記をすればいいのか教えてください。よろしくお願いします。

Aベストアンサー

var version = navigator.appVersion.charAt(0);
if( navigator.appName == "Netscape" && version >= "5")
{
//document.write("NN6");
// ここに NN6.0以上 の関数を(全て)書きます(5 はない)
function OpenLayer()
{
document.getElementById(content_menu).visibility="visible";
}

function CloseLayer()
{
document.getElementById(content_menu).content_menu.visibility="hidden";
}

} else if( navigator.appName == "Netscape" && version < "5" && version >= "4")
{
//document.write("NN4 "); document.write(version);
// ここに NN4.x の関数を(全て)書きます
function OpenLayer()
{
document.content_menu.visibility="visible";
}

function CloseLayer()
{
document.content_menu.visibility="hidden";
}
} else {
//document.write("IE "); document.write(version);
// ここに IE の関数を(全て)書きます
function OpenLayer()
{
document.content_menu.style.visibility="visible";
}

function CloseLayer()
{
document.content_menu.style.visibility="hidden";
}
}
(テストしていないので、自信なし)

var version = navigator.appVersion.charAt(0);
if( navigator.appName == "Netscape" && version >= "5")
{
//document.write("NN6");
// ここに NN6.0以上 の関数を(全て)書きます(5 はない)
function OpenLayer()
{
document.getElementById(content_menu).visibility="visible";
}

function CloseLayer()
{
document.getElementById(content_menu...続きを読む

Q「ドラッグによる選択の拒否」「すべて選択の拒否」の指定個所を特定したい

http://www.wordreference.com/es/translation.asp?tranword=drink&v=b

ここのページ(辞書サイト)で、検索結果の("beber""copa"など)どの部分をコピーしようとしてドラッグしても、拒否されます。これは「ドラッグ拒否のJavaScript 指定」だと思いました。「編集」→「すべてを選択」でも拒否されました。このページのソースを見ていますが、どの部分が「ドラッグなどによる指定の拒否」の指令にあたるのかがわかりません。どの個所でしょうか?

Aベストアンサー

ドラッグ拒否というより、例えばbeberをクリックするとその言葉の説明ページに飛ぶ仕掛けになっているように思います。
ソースの50行目に、

<span onclick='dr4sdgryt2()' style='cursor:hand'>

このような箇所があります。これがクリックしたら dr4sdgryt2 という関数を実行するということを表しています。

Qjavasctiptでチェックボックスの全選択・全解除を複数かけ合わせたものが実装できません

下記のような、チェックボックスの全選択・全解除を複数かけ合わせたものが実装できません。

□A(親)
 □A-a(子) □A-a-1(子の子) □A-a-2 □A-a-3
 □A-b(子) □A-b-1(子の子) □A-b-2 □A-b-3
 □A-c(子) □A-c-1(子の子) □A-b-2 □A-b-3

□B(親)
 □B-a(子) □B-a-1(子の子) □B-a-2 □B-a-3
 □B-b(子) □B-b-1(子の子) □B-b-2 □B-b-3
 □B-c(子) □B-c-1(子の子) □B-b-2 □B-b-3

□C(親)
 □C-a(子) □C-a-1(子の子) □C-a-2 □C-a-3
 □C-b(子) □C-b-1(子の子) □C-b-2 □C-b-3
 □C-c(子) □C-c-1(子の子) □C-b-2 □C-b-3

というチェックボックスがあり、

1:親を選択→親に属する子、子の子がすべて選択
  選択解除 →すべてが解除
 ■A(親)
 ■A-a(子) ■A-a-1(子の子) ■A-a-2 ■A-a-3
 ■A-b(子) ■A-b-1(子の子) ■A-b-2 ■A-b-3
 ■A-c(子) ■A-c-1(子の子) ■A-b-2 ■A-b-3

2:子をすべて選択 →親、子の子すべて選択
  子を選択解除→親、子が選択解除

 □A(親)
 □A-a(子) □A-a-1(子の子) ■A-a-2 ■A-a-3
 ■A-b(子) ■A-b-1(子の子) ■A-b-2 ■A-b-3
 ■A-c(子) ■A-c-1(子の子) ■A-b-2 ■A-b-3

2:子の子をすべて選択 →子、親すべて選択
  子の子を選択解除→子、親が選択解除

 □A(親)
 □A-a(子) □A-a-1(子の子) ■A-a-2 ■A-a-3
 ■A-b(子) ■A-b-1(子の子) ■A-b-2 ■A-b-3
 ■A-c(子) ■A-c-1(子の子) ■A-b-2 ■A-b-3



下記を参考にしてみて試行錯誤してみたのですが、応用することができませんでした。。。(ほぼ素人です)
http://q.hatena.ne.jp/1256449988
http://www.miklabo.com/web/js/js_check.php


HTMLは下記のようなものを用意しています。
<form>
<label><input type="checkbox" name="section1" />A</label>
<label><input type="checkbox" name="section11" />A- a</label>
<label><input type="checkbox" name="section111" />A-a-1</label>
<label><input type="checkbox" name="section111" />A-a-2</label>
.
.
.

</form>


時間がなく、困っております。是非ご教授いただけませんでしょうか?


よろしくお願いいたします。

下記のような、チェックボックスの全選択・全解除を複数かけ合わせたものが実装できません。

□A(親)
 □A-a(子) □A-a-1(子の子) □A-a-2 □A-a-3
 □A-b(子) □A-b-1(子の子) □A-b-2 □A-b-3
 □A-c(子) □A-c-1(子の子) □A-b-2 □A-b-3

□B(親)
 □B-a(子) □B-a-1(子の子) □B-a-2 □B-a-3
 □B-b(子) □B-b-1(子の子) □B-b-2 □B-b-3
 □B-c(子) □B-c-1(子の子) □B-b-2 □B-b-3

□C(親)
 □C-a(子) □C-a-1(子の子) □C-a-2 □C-a-3
 □C-b(子) □C-b-1(子の子) □C-b-2 □C-b-3
 □C-c(...続きを読む

Aベストアンサー

つかれた~。いべんとのはりつけは、てぬきしました。
あとByName()[0]とかもてぬきです。
まちがいがあったら、ごしてきおねがいします。
ぜんかくくうはくは、すべてはんかくになおしてくださいね。ばぶ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">

<head>
 <meta http-equiv="Content-Script-Type" content="application/javascript">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>test1.html</title>

 <style type="text/css">
  fieldset {
   padding: 4px;
  }
  fieldset.mago {
   width: 400px;
  }
  p {
   margin: 0;
  }
  p.ko {
   float: left;
   width: 200px;
   margin: 4px 0;
  }
 </style>

</head>

<body>
<form name="abc" action="#">
 <fieldset>
  <legend>グループA<input type="checkbox" value="A" name="Group_A" onClick="GA.setAll(this.checked)">(全てを選択する)</legend>

   <fieldset class="ko">
    <p class="ko">
     <input type="checkbox" name="Group_A_A" size="30" onClick="GA_A.setAll(this.checked);GA.checker()">子供用
    </p>
    <fieldset class="mago" onClick="GA_A.checker()">
     <p>
      <input type="checkbox" name="Group_A_A_1" size="30">option1
      <input type="checkbox" name="Group_A_A_2" size="30">option2
      <input type="checkbox" name="Group_A_A_3" size="30">option3
     </p>
    </fieldset>
   </fieldset>
  
   <fieldset>
    <p class="ko">
     <input type="checkbox" name="Group_A_B" size="30" onClick="GA_B.setAll(this.checked);GA.checker()">大人用
    </p>
    <fieldset class="mago" onClick="GA_B.checker()">
     <p>
      <input type="checkbox" name="Group_A_B_1" size="30">option1
      <input type="checkbox" name="Group_A_B_2" size="30">option2
      <input type="checkbox" name="Group_A_B_3" size="30">option3
     </p>
    </fieldset>
   </fieldset>

   <fieldset>
    <p class="ko">
     <input type="checkbox" name="Group_A_C" size="30" onClick="GA_C.setAll(this.checked);GA.checker()">老人用
    </p>
    <fieldset class="mago" onClick="GA_C.checker()">
     <p>
      <input type="checkbox" name="Group_A_C_1" size="30">option1
      <input type="checkbox" name="Group_A_C_2" size="30">option2
      <input type="checkbox" name="Group_A_C_3" size="30">option3
     </p>
    </fieldset>
   </fieldset>

 </fieldset>

</form>

<script type="text/javascript">

var Group = function ( parent ) {

 this.name = 'CheckboxGroup';
 this.parent = document.getElementsByName( parent )[0];

 this.add = function ( ) {
  var objs;
  var cnt1, obj1;
  var cnt2, obj2;
  
  for( cnt1 = 0; obj1 = arguments[ cnt1++ ]; ) {
   if( 'string' === typeof obj1 ) {
    objs = document.getElementsByName( obj1 ) || [ document.getElementById( obj1 ) ];
    for( cnt2 = 0; obj2 = objs[ cnt2++ ]; )
     member.push( obj2 );
   } else if( 'INPUT' === obj1.nodeName && 'checkbox' === obj1.type ) {
    member.push( obj1 );
   } else if( obj1.name === 'CheckboxGroup' ) {
    member.push( obj1 );
   }
  }
 };
 
 
 this.setAll = function ( sw ) {
  var cnt = 0, o;

  this.parent.checked = sw = sw ? true: false;

  while( o = member[ cnt++ ] )
   'CheckboxGroup' === o.name ? o.setAll( sw ): o.checked = sw;
 }
 
 
 this.checker = function ( ) {
  var cnt = 0, flag, o, p;

  while( o = member[ cnt++ ] ) {
   p = 'CheckboxGroup' == o.name ? o.parent.checked: o.checked;
   if( 'undefined' === typeof flag )
    flag = p;
   else
    if( flag != p ) return;
  }
  this.parent.checked = flag;
 };


 var cnt = 1, member = [ ], args = [ ], o;

 while(o = arguments[ cnt++ ] )
  args.push( o );
 
 this.add.apply( this, args );
};

var GA_A = new Group( 'Group_A_A', 'Group_A_A_1', 'Group_A_A_2', 'Group_A_A_3');
var GA_B = new Group( 'Group_A_B', 'Group_A_B_1', 'Group_A_B_2', 'Group_A_B_3');
var GA_C = new Group( 'Group_A_C', 'Group_A_C_1', 'Group_A_C_2', 'Group_A_C_3');

var GA = new Group( 'Group_A', GA_A, GA_B, GA_C );
//うえの4ぎょうを、わんせっとで、がんがんおぶじぇくとをつくる!
</script>
</body>
</html>

つかれた~。いべんとのはりつけは、てぬきしました。
あとByName()[0]とかもてぬきです。
まちがいがあったら、ごしてきおねがいします。
ぜんかくくうはくは、すべてはんかくになおしてくださいね。ばぶ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">

<head>
 <meta http-equiv="Content-Script-Type" content="application/javascript">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>test1.html</title>

 <style type="text/...続きを読む


人気Q&Aランキング

おすすめ情報