Visual BasicなどでテキストボックスをForm内で自由に配置することができますが、当然ウェブ上でそのような事をすることは難しいです。例えばウェブで、ユーザーにボタンを押してもらうことでテキストボックスを追加する。その追加したテキストボックスをユーザーが自由に配置するようにすることは可能でしょうか?もしそのような事をやっているサイトなどがあれば教えてください。


これはJavaScriptで可能なことでしょうか?それとも違う言語を使わないといけないでしょうか?

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/08/23 23:07:30
  • 終了:2006/08/30 23:10:04

回答(2件)

id:takemori No.1

takemori回答回数29ベストアンサー獲得回数22006/08/23 23:54:12

ポイント35pt

jaascriptで可能です

たとえば

http://prototype-window.xilinus.com/

ここのTest itをクリックするとウインドウが現れ

大きさを変えたりウインドウを動かすことも出来ます。

このウインドウの中にはテキストボックスでも

何でも入れられます。

http://www.google.co.jp/ig?hl=ja

googleではRSSリーダーを自由に追加、配置できます。


Javascriptフレームワークを利用すると

より簡単に作ることが出来ます

http://prototype-window.xilinus.com/

このサイトはもっと面白いです

一部を除いてほとんどjavascriptで出来ています。

id:moonhappy

おぉ、JavaScriptでこんな事ができるんですね、知りませんでした。ありがとうございます!こういうのを探していました。Googleのはすごいですね、こんな簡単にできてしまうとは。

2006/08/24 00:00:03
id:llusall No.2

llusall回答回数505ベストアンサー獲得回数612006/08/24 00:37:11

ポイント35pt

こんな感じでしょうか?


<html>

<head>

<title>DragDrop Sample</title>

<script type="text/javascript">

<!--

var obj;

var offsetX;

var offsetY;

onload=function () {

    document.getElementById("hatena").onmousedown = onMouseDown;

    document.onmousemove = onMouseMove;

    document.onmouseup = onMouseUp;

}

function onMouseDown(e) {

    obj = this;

    if (document.all) {

        offsetX = event.offsetX + 2;

        offsetY = event.offsetY + 2;

    } else if (obj.getElementsByTagName) {

        offsetX = e.pageX - parseInt(obj.style.left);

        offsetY = e.pageY - parseInt(obj.style.top);

    }

    return false;

}

function onMouseMove(e) {

    if (!obj) {

        return true;

    }

    if (document.all) {

        obj.style.left = event.clientX - offsetX + document.body.scrollLeft;

        obj.style.top = event.clientY - offsetY + document.body.scrollTop;

    } else if (obj.getElementsByTagName) {

        obj.style.left = e.pageX - offsetX;

        obj.style.top = e.pageY - offsetY;

    }

    return false;

}

function onMouseUp(e) {

    obj = null;

}

function create() {

    var txtObj = document.createElement("input");

    txtObj.setAttribute("type","text");

    txtObj.style.position = "absolute";

    txtObj.style.top  = "100px";

    txtObj.style.left = "100px";

    txtObj.onmousedown = onMouseDown;

    var divObj = document.getElementById("pBox");

    divObj.appendChild(txtObj);

}

//-->

</script>

</head>

<body>

<div id="hatena" style="position:absolute; top:100px; left:200px; width:200px; height:50px; padding: 5px; border:1px #000000 solid; text-align: center; cursor: move; background-color: #eeeeee;">

Clickボタン押下で、テキストボックス作成。

ドラッグできる。

</div>




<input type="button" id="myButton" value="Click" onClick="create()">

<div id="pBox"></div>

</body>

</html>

id:moonhappy

おぉ、すごい!こんな短いコードでこんな素晴らしいことができるんですか!濡れました、ありがとうございます!

2006/08/24 00:54:45

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません