- ベストアンサー
JavaScriptで画像Ｄ＆Ｄ
ちょっとした「遊びもの」を作るため、 ｗｅｂブラウザ上で画像をドラッグ＆ドロップできるように したいのですが、なかなかうまく作れません。 クロスブラウザ仕様じゃなく、ＩＥ専用でいいので どなたかいい感じのスクリプトを知りませんか？ ちなみに画像は２個以上でお願いします。
- meke2
- お礼率79% (23/29)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
Dynamic HTML cross-browser/Examples http://www.fureai.or.jp/~tato/DHTML/simple/contents.htm の中にある Base Script for Dragon レイヤをドラッグして動かすための基本スクリプト http://www.fureai.or.jp/~tato/DHTML/simple/part2/sample/dragdrag/dragbase.htm がまさにご要望のものだと思います。 参考まで
その他の回答 (1)
- ku-tan
- ベストアンサー率0% (0/2)
ファイルが添付できないのでソース貼っちゃいます。不都合があるときはメールください。 <HTML> <HEAD><TITLE>オブジェクトをドラッグ＆ドロップで移動したい</TITLE> </HEAD> <SCRIPT language="JavaScript"> var target; var isDrag=0; function document_onmousedown(){ isDrag=1; target=event.srcElement;} function document_onmousemove(){ if( isDrag ){ target.style.top=event.clientY-8; target.style.left=event.clientX-8;} } function document_onmouseup(){ isDrag=0; sample.style.top=text1.style.top; sample.style.left=text1.style.left; //alert(text1.style.top); //alert(event.srcElement); } </SCRIPT> <BODY onmousemove="document_onmousemove()" onmousedown= "document_onmousedown()" onmouseup="document_onmouseup()"> <DIV id=text1 style="position:absolute;font-size:24px; cursor:hand"> <!--ここにIMGで画像を置いてください--> (^ ^; </DIV> <DIV id=text2 style="position:absolute;font-size:24px; cursor:hand"> <input type="text"> </DIV> <BR> <BR> <BR> <DIV style="position:relative" id=sample> このオブジェクトが移動します </DIV>
お礼
ご返答ありがとうございます！ スクリプトはＩＥのみ(？)と言うことでとても見やすいです！ が、画像のみをＤ＆Ｄがうまくいかないようです。(顔文字なら可) メールで連絡と言うことですが、あまり迷惑もかけては悪いので 自粛させてもらいます。 あと、テキストエリアも動かせるのは発見ものでした！参考にさせて頂きます！
関連するQ&A
- ネット上の画像をD&Dで簡単に保存(IE, Sleipnir)
ウェブ上の画像をドラッグしてほんの少しでも動かして ドロップしたら勝手に画像が保存されないかと思い探していました。 ババロアというソフトを見つけたのですがドラッグ後に出現するウィンドウに 運ばないといけない事、保存ファイル名の最後に数字が自動で付く事 以上2点が気になるのでやめました(iniファイルを見ても数字の消し方はわかりません)。 次に、Sleipnir2スレ(http://lukewarm.s151.xrea.com/test/read.cgi/b/1163165308/7) という所で見つけたスクリプトを使ってみました。 希望に近いものでしたが保存先の変更の仕方がわかりません・・・ iniに書かれているようにパスを設定しましたが保存されませんでした。 (スクリプトによるクライアントの操作も許可し、SeaHorseには無事登録されています) Sleipnirバージョンは2.5.12です。 IE、或いはSleipnirで使えるD&Dで簡単に画像を保存できるフリーソフトはないでしょうか？ ファイル名は変更せずに保存してくれるものを希望します。 環境はWindowsXP Pro SP2です。 よろしくお願いします。
- ベストアンサー
- フリーウェア・フリーソフト
- ピクネットの画像ファイル呼び込みについて
パソコンに保存してあるファイルや、ブラウザからもドラッグ＆ドロップで画像をとり込めます。 ［ファイルを読み込む］140×180（横縦）サイズ以上の機種を設定した場合 手順 １ ピクネットツール本体のボタンをクリックするとよみ込みモードに切り替わります。 ２ とり込み窓上にとり込みたい画像をドラッグ＆ドロップしてください。ブラウザからもドラッグ＆ドロップで画像をとり込めます。 ※ピクネットツール本体のプレビュー窓に直接ドラッグ＆ドロップしてもファイルを読み込みます。 ３ スクロールバーをドラッグして、表示されている画像の位置を上下、左右に調整します。とり込み窓に表示されている画像を直接ドラッグしても調整できます。 ４ 、、 ボタンで画像をトリミングします。 ※ボタンで画像が100％になります。また、 、、ボタンでとり込み窓が回転します。 ５ ボタンまたはボタンをクリックして画像をとり込みます。 ６ ボタンをクリックすると画像をよみ込まずにキャプチャーモードに切り替えます。 とありますが、ドラッグ＆ドロップとはなんでしょう？ 具体的にどうすれば画像がとりこめるのでしょう？
- 画像のドラッグアンドドロップについて
はじめて質問します。 Win7、IE9を使っています。 インターネット上にある画像を「ペイント」などへ直接ドラッグアンドドロップする方法を教えて下さい。 ドラッグして、ドロップしようとすると、赤い禁止マークが出てドロップできません。 XPでは普通に出来ましたが、7ではできない仕様なのでしょうか。 設定の変更や、セキュリティレベルなどを下げなければならない場合、 どのぐらい危険性があるのかも教えて下さい。 宜しくお願い致します。
- 締切済み
- Windows 7
- JavaScriptを使った画像拡大
こんにちは。いつもお世話になっています。 http://coliss.com/articles/web-services/581.htmlのSplashupのキャプチャ画像をクリックすると、 ブラウザはそのままで画像だけが大きくなり、ドラッグで動かせます。 これを自分のホームページにも取り入れたいと思っています。 おそらくJavaScriptを使っていると見当はつき、調べてみたのですが、どうすればいいかわかりません。 どなたかご教授お願いします。
- ベストアンサー
- JavaScript
- ウェブ上の画像を保存出来ないようにする方法
Win98SE、IE6です。 ウェブ上の画像をHDに保存する方法としていくつかあります。 その中の一つ。ウェブ上の画像をエクスプローラ等にドラッグ&ドロップしてHDに保存する方法を、禁止する方法を教えてください。
- 締切済み
- その他（インターネット・Webサービス）
- PowerpointでD&Dでの画像挿入ができない
Powerpoint2007を使っています。OSは，win7です。 最近，powerpoint2007のスライドの中に，別のフォルダ内から画像ファイル(jpg, bmp)をドラッグアンドドロップで挿入することができなくなってしまいました。画像ファイルを，powerpointのスライド上にドラッグすると，アイコンが駐車禁止マーク（マルに斜めの線）に変わり，ドロップしても何も起こりません。ファイル名としてドロップされるというのでもありません。とりあえず， ・PCの再起動 ・Officeの修復 ・常駐ソフトの停止 ・新規powerpointファイルでの実行 は試してみましたが，いずれもダメでした。なお，そのドラッグアンドドロップでの挿入ができないpowerpointファイルを他のPCで開くと，問題なくドラッグアンドドロップでの画像挿入ができました。また，同じoffice2007である word2007 では普通にドラッグアンドドロップでの画像挿入ができました。 画像ファイルをコピーして，powerpointスライドの上での貼り付けはできます。とりあえずこれでしのいでいますが，ドラッグアンドドロップが使えないのは不便ですし，不具合の理由がわからないので気になります。 症例をググってみましたが，同じような現象としては2003年頃に photoeditor との関連付けが切れた場合に，このようなことが起こるというのがありました。しかし，今は photoeditor はありませんし，同じoffice2007 の word2007 へのドラッグアンドドロップはできるので，これは関係ないと思います。 解決法や原因がお分かりの方がいらっしゃいましたら，ご教授くださいますよう，よろしくお願いいたします。
- ベストアンサー
- オフィス系ソフト
- 右クリックをしたときに・・・
ときどき、ページを見てるときに右クリックすると アラートがでるページがありますが、アレの応用で 『右クリックするとメニューがでる』ようなスクリプトって 作れますか(もしくはありますか？) イメージとしてはディスクトップを右クリックした時のような メニューが出したいのですが・・・ ちなみにＩＥ専用でいいのですが(クロスブラウザ仕様じゃなくてかまいません。) お力添えどうかよろしくお願いしますm(_ _)m
- 締切済み
- JavaScript
- 画像ファイルのドラック&ドロップしてと
「スタート」画面のアイコン・縮小専用を開いたら、画像ファイルをここにドラッグ&ドロップしてとありましたが、マイピクチュアの写真をどのようにしてドラッグ&ドロップしたらいいのでしよう?
- 締切済み
- ブログ
- 画像のドラッグアンドドロップによるコピー
IE6をウィンドウズXPホームエディションで使用していますが、突然Webページの画像をドラッグしてドロップ＆コピーができなくなってしまいました。 IEの修復も試みましたが、効果はありませんでした。 直し方をご存じの方、アドバイスよろしくお願いします。
- 締切済み
- ブラウザ
- ドラッグ＆ドロップ禁止について
JavaScript初心者です。 IEへファイルのドラッグ＆ドロップを禁止したいのですが、 うまくいきません。テキストや画像ファイルを、IEに ドラッグ＆ドロップすると表示されてしまいます。 何方か御存知の方、教えていただけないでしょうか？ よろしくお願いいたします。 環境：W2K、IE6SP1、JDK1.3 です。 ソースは以下のとおりです。 -- ソース -------------------- <HTML> <SCRIPT Language="JavaScript"> <!-- window.ondragdrop = false; // --> </SCRIPT> <BODY> ドラッグ＆ドロップ禁止 </BODY> </HTML> -----------------------------
- 締切済み
- JavaScript
お礼
ご返答ありがとうございます！ こんなサイトもあるんですね。これからの「遊びもの」作りにとても 役立ちそうな感じです！ (クロスブラウザ仕様がちょっと気になりますが＞なにせスクリプトが多いから) ぴったりのご回答ありがとうございました！