人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

●質問者: moonhappy
●カテゴリ:コンピュータ インターネット
✍キーワード:JavaScript Visual Basic ウェブ サイト テキスト
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● takemori
●35ポイント

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で出来ています。

◎質問者からの返答

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


2 ● llusall
●35ポイント

こんな感じでしょうか?


<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>

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ