ちょっとした「遊びもの」を作るため、
webブラウザ上で画像をドラッグ&ドロップできるように
したいのですが、なかなかうまく作れません。

クロスブラウザ仕様じゃなく、IE専用でいいので
どなたかいい感じのスクリプトを知りませんか?

ちなみに画像は2個以上でお願いします。

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

A 回答 (2件)

Dynamic HTML cross-browser/Examples


http://www.fureai.or.jp/~tato/DHTML/simple/conte …

の中にある

Base Script for Dragon
レイヤをドラッグして動かすための基本スクリプト
http://www.fureai.or.jp/~tato/DHTML/simple/part2 …

がまさにご要望のものだと思います。

参考まで

参考URL:http://www.fureai.or.jp/~tato/DHTML/simple/conte …
    • good
    • 0
この回答へのお礼

ご返答ありがとうございます!
こんなサイトもあるんですね。これからの「遊びもの」作りにとても
役立ちそうな感じです!
(クロスブラウザ仕様がちょっと気になりますが>なにせスクリプトが多いから)

ぴったりのご回答ありがとうございました!

お礼日時:2001/03/08 23:45

ファイルが添付できないのでソース貼っちゃいます。

不都合があるときはメールください。

<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>
    • good
    • 0
この回答へのお礼

ご返答ありがとうございます!
スクリプトはIEのみ(?)と言うことでとても見やすいです!
が、画像のみをD&Dがうまくいかないようです。(顔文字なら可)
メールで連絡と言うことですが、あまり迷惑もかけては悪いので
自粛させてもらいます。
あと、テキストエリアも動かせるのは発見ものでした!参考にさせて頂きます!

お礼日時:2001/03/08 23:38

このQ&Aに関連する人気のQ&A

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

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

Qドラッグ&ドロップスクリプトがIE8で動かない

http://tool-man.org/examples/sorting.htmlで
作成公開されているドラッグ&ドロップスクリプトがIE8では、
正常に動作しないのですが、修正をされた方いらっしゃいますでしょうか?

Aベストアンサー

drag.jsの117行目に
originalZIndex = typeof(originalZIndex) != "undefined" ? originalZIndex : 1;
みたいなの追加なんてどうです?

#適当にfirefoxと同じ値になるようにしてみただけなので、正しくないかもしれませんが・・・

Qドラッグ & ドロップでのドロップ先のID取得

以下のURLを拝見し、ドラッグ & ドロップをおこなっています。

http://www.atmarkit.co.jp/fdotnet/chushin/introhtml5_03/introhtml5_03_01.html


ドラッグ先のIDを取得することは可能なのですが、
ドロップ先のIDを取得することがわかりません。 drop先のid を変数にしたいと思っています。

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

Aベストアンサー

例示なさっているスクリプトの(3)の部分で、ドラッグした要素を移動する先が御質問の「ドロップ先」に当たると思いますが、


 >event.currentTarget.appendChild(elm);
のevent.currentTargetがその要素に該当します。

必ずidが付されているとは限りませんが、event.currentTarget.idでidを取得することが可能です。

Q画像をドラッグ&ドロップで移動したい

画像をドラッグ&ドロップで移動したいのですが、
DIV内でテキスト文だと移動できるのですが、画像だけだと移動できません(テキスト文と画像を入れるとテキスト文と一緒に画像が移動しますが、テキスト文なしの画像だけで移動させたいです。)
何故、画像だけでドラッグ&ドロップで移動させることができないのでしょうか?画像だけで移動させるにはどうしたらいいでしょうか?
宜しくお願いいたします。
IE7です。


<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;
target.style.left=event.clientX;}
}
function document_onmouseup(){
isDrag=0;

//alert(text1.style.top);
//alert(event.srcElement);
}
</SCRIPT>
<BODY onmousemove="document_onmousemove()" onmousedown=
"document_onmousedown()" onmouseup="document_onmouseup()">
<DIV style="position:absolute;font-size:24px;cursor:hand; ">
<img src="画像.gif">
</DIV>

<BR>
<BR></BODY></html>

画像をドラッグ&ドロップで移動したいのですが、
DIV内でテキスト文だと移動できるのですが、画像だけだと移動できません(テキスト文と画像を入れるとテキスト文と一緒に画像が移動しますが、テキスト文なしの画像だけで移動させたいです。)
何故、画像だけでドラッグ&ドロップで移動させることができないのでしょうか?画像だけで移動させるにはどうしたらいいでしょうか?
宜しくお願いいたします。
IE7です。


<HTML>
<HEAD><TITLE>画像をドラッグ&ドロップで移動したい</TITLE>
</HEAD>
<SCRI...続きを読む

Aベストアンサー

<DIV style="略">文字列</DIV>

とした場合、「文字列」をクリックした際に起こる、
マウスイベントで取得されるエレメントの対象はDIVです

<DIV style="略"><img src="画像.gif"></DIV>

とした場合、「画像.gif」をクリックした際に起こる、
マウスイベントで取得されるエレメントの対象はimgです
img自体にはposition:absoluteによる絶対配置は設定されていないので、
target.style.top等による位置指定は適用できず失敗するのだと思います

画像単独ならば、divを使わずimgタグ自体にposition等のstyle設定を適用させることで解決できます
div内にimgと文字列が混在し、両者を1つとして扱いたい場合は、
マウスダウン用のfunctionを

function document_onmousedown(){
isDrag=1;
target=event.srcElement;
while(target.style.position != "absolute" && target.tagName != "BODY"){
target = target.parentNode;
}
}

のようにして、positionがabsoluteか確認しつつ、
そうでなければtargetを上階層にしていくようにすれば大丈夫かと思います
// tagNameの判別部はwhileによる上階層探索を最悪BODYで止め永久ループを防ぐためです

ちなみにこれはIE6で試したものなので7用に変更が必要になるかもしれませんが、
考え方としては一緒になると思うので参考までに。

後はマウス動作が全てBODYにかかっているので、
BODY自体をクリックした時はどうするの?
ということも考慮していくのが望ましいと思いますよ

<DIV style="略">文字列</DIV>

とした場合、「文字列」をクリックした際に起こる、
マウスイベントで取得されるエレメントの対象はDIVです

<DIV style="略"><img src="画像.gif"></DIV>

とした場合、「画像.gif」をクリックした際に起こる、
マウスイベントで取得されるエレメントの対象はimgです
img自体にはposition:absoluteによる絶対配置は設定されていないので、
target.style.top等による位置指定は適用できず失敗するのだと思います

画像単独ならば、divを使わずimgタグ自体にposition等...続きを読む

Qドラッグ&ドロップによるDB更新について

DBを参照してWebブラウザ上に動的に表示されているデータを、マウスでドラッグ&ドロップすることは可能でしょうか。また、マウス操作のみでDBを更新することはできるのでしょうか。
具体的には、以下のようなアルバイトのシフト作成業務を想定して質問しています。

1.データベースに格納されている仕事情報をブラウザ上にグラフ表示する
2.データベースに格納されているスタッフのスケジュール情報をブラウザ上にグラフ表示する
3.仕事情報をスケジュール情報にマウスでドラッグ&ドロップすることで、仕事をスタッフにアサインし、データベースを更新する

以上です。初歩的な質問かも知れませんが、お知恵をお貸しいただければ幸いです。よろしくお願いします。

Aベストアンサー

JavaScriptを用いてドラッグ&ドロップは可能です。

以前、CGIとJavaScriptを使って↓のようなものを作ったことがあります。
http://www2s.biglobe.ne.jp/~memo/cgi-bin/postit.cgi

これは単純に1~3を繰り返しています。
 1)CGIでデータを表示
 2)ドラッグ&ドロップされたら「ナニをドコにドロップしたか?」をCGIへ渡す
 3)CGIでデータの位置情報を更新して1に戻る

シフト表だと、例えば3のところで「ドロップされた位置は何曜日の何時だ」という処理を加えるなどする必要がありそうですね。

QAjax Updaterでドラッグアンドドロップ

正確にはタイトルがおかしいのですが…
現在、商品をドラッグアンドドロップで買い物かごに入れ、
入れられた商品はカート上に表示されるというプログラムをPHP+Ajaxで組んでいます。しかし、ドラッグアンドドロップの機能を実装するところまではいいのですが、それを買い物かごに入れるという動作がうまくいきません。
以下にソースコードを掲載します。

<script type="text/javascript">Droppables.add('lwi_navi_2',
{accept:'items',onDrop:function(element){new Ajax.Updater("cart20to40",
"index.php",
{"method": "get",
"parameters": "action=cartAdd&
id= ' + encodeURIComponent(element.id) + '
},hoverclass:'nowHover'})</script>

index.phpは現在表示しているページです。(カレントファイル)
ParamatersのactionのcartAddで読みだされるのは

/*カートにドロップされたとき*/
function cartAdd(){
//関数内で使用する配列名を決定
$ArrayName = "cart" + 20 + "to" + 40;
//送られてきたドロップエレメンツの名前を区切り文字で配列に収納
$itemName = explode('_',$POST['id']);

//配列itemNoの数字部分をint型に変換し収納
$itemId = (int)$itemName(1);

//ArrayNameで定義された配列の商品IDと一致する行に1を足す
$_SESSION[$ArrayName][$itemId] ++;

//この配列を元にカート作成関数を実行
makeCartItem($startAge,$endAge);
var_dump($cart20to40);
return;
}

これを実行しても、ページには何の変化もありませんでした。
何か手掛かり及び根本的な考え方の間違えがあれば教えてください。

正確にはタイトルがおかしいのですが…
現在、商品をドラッグアンドドロップで買い物かごに入れ、
入れられた商品はカート上に表示されるというプログラムをPHP+Ajaxで組んでいます。しかし、ドラッグアンドドロップの機能を実装するところまではいいのですが、それを買い物かごに入れるという動作がうまくいきません。
以下にソースコードを掲載します。

<script type="text/javascript">Droppables.add('lwi_navi_2',
{accept:'items',onDrop:function(element){new Ajax.Updater("cart20to40",
"index.p...続きを読む

Aベストアンサー

筋違いならごめん。
買い物籠に入れているデータは、Javascript側ですべて管理して
確認時にまとめて送信しては?


このカテゴリの人気Q&Aランキング

おすすめ情報