テキスト（エディターやドリームウェーバー）でコードから編集するのではなく、ページの中でボタンを作成、配置できる（クリック、ドラッグ、ドロップ）プログラムについて

前提・実現したいこと

ページ上でボタンをいくつか作成し、並べるプログラムを組みたいと考えています。
テキストを開かずにそのページの中でボタンを作成し、ドラッグで並べていくページを作成したいです。

テキストからコードを書き換えることでボタンを配置することはできるのですが、開かれたページの中で直接編集ができるようにするプログラムを組みたいと考えています。

例えば、ページの上から並べたいボタンのサンプルをドラッグ＆ドロップで配置していくようなイメージです↓

↓ドラッグ＆ドロップ

発生している問題・エラーメッセージ

そもそもphpやhtmlで作成したプログラムをテキスト上ではなく作成したページ上で干渉することが可能なのか、干渉するにはどのようなプログラムが必要なのかを教えていただきたいです。
もし博識な方がおりましたら、簡易的でも結構ですので上記のようなイメージのプログラムの組み方をご教授願いたいと思っています。
「ボタンは画像ファイルのほうがいい」など、アドバイスを頂けると大変助かります。
大雑把で投げやりな質問になってしまっていますが、どうか暖かい目でご回答いただければ嬉しく思います。
何卒よろしくお願いいたします。

dice142

2018/10/30 08:02

質問上のテキストとは何を指しますか？また、「どういうプログラムを組めばよいか」という質問は回答を得られにくいです。

行動規範の内容に同意します

回答3件

おそらく絶対位置を保持するしかなく、そのポリシーで配置したボタンは
使い勝手がわるく、よほど作り込めば別ですが実用には向かない可能性が高いです。
作成者も閲覧者も誰も幸せにならないシステムだと思います。

投稿2018/10/31 01:53

yambejp

総合スコア114829

ベストアンサー

ちょっと、干渉とか、テキストとかの意図するところがわかりにくいので、とりあえず、絵のまんま

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <style>
6  .leftbox ,.rightbox{
7    height:500px;
8    float:left;
9    margin-left:10px;
10    border: 1px solid silver;
11  }
12  .leftbox{
13    width:500px;
14  }
15  .rightbox{
16    width:200px;
17  }
18  .rightbox:after{
19    clear:both;
20  }
21  .button{
22    display:inline-block;
23    background-color:whitesmoke;
24    border: 1px solid #666666;
25    width:100px;
26    margin:6px;
27    text-align:center;
28  }
29</style>
30<script>
31function dragstart(event){
32  event.dataTransfer.setData("text", event.target.id);
33}
34function dragover(event){
35  event.preventDefault();
36}
37function drop(event){
38  var data = event.dataTransfer.getData("text");
39  var copyNord =document.getElementById(data).cloneNode(true);
40  copyNord.id = "newId";
41  event.currentTarget.appendChild(copyNord);
42  event.preventDefault();
43}
44</script>
45</head>
46<body>
47  <div class="leftbox" ondragover="dragover(event)" ondrop="drop(event)">
48  </div>
49  <div class="rightbox">
50    <div id="buttonA" class="button" draggable="true" ondragstart="dragstart(event)">
51      ボタンA
52    </div>
53  </div>
54</body>
55</html>