質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

531閲覧

web上でビーズを詰め込んでブレスレッドをオーダーメイドで作るシステム

yagiyogi

総合スコア5

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2019/11/25 07:58

前提・実現したいこと

ホームページ上からブレスレッドをオーダーメイドで作れる
(動的にブレスレッドのビーズを追加、並び替えが出来る)
システムを作ろうとしています。

発生している問題

ビーズを一覧からドラッグしてドロップ欄(ブレスレッド)にドロップしてオーダーメイドのブレスレッドを作りたいのですが、要素を環状に追加する方法がわからず頓挫しています。
要素を動的に環状に追加する方法はあるのでしょうか?
下記ソース以外の方法でも、他にやり方がありましたら、ご教授お願いします。

該当のソースコード

javascript

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <script src="./js/jquery-ui-1.8.20/jquery-1.7.2.js"></script> 6 <script src="./js/jquery-ui-1.8.20/ui/jquery.ui.core.js"></script> 7 <script src="./js/jquery-ui-1.8.20/ui/jquery.ui.widget.js"></script> 8 <script src="./js/jquery-ui-1.8.20/ui/jquery.ui.mouse.js"></script> 9 <script src="./js/jquery-ui-1.8.20/ui/jquery.ui.draggable.js"></script> 10 <script src="./js/jquery-ui-1.8.20/ui/jquery.ui.sortable.js"></script> 11 <link rel="stylesheet" href="./js/jquery-ui-1.8.20/themes/base/jquery.ui.theme.css"> 12 <style> 13 <!-- 14 15/* 大枠 */ 16#waku { 17 border-style:solid; 18 border-width:1px; 19 border-color:black; 20 padding: 10px; 21} 22 23/* 右枠・ドラッグ枠 */ 24#dragArea { 25 width:255px; 26 padding: 10px; 27 border-style:solid; 28 border-width:3px; 29 border-color:blue; 30 float:right; 31} 32 33/* divのfloatの解除用 */ 34.clear { 35 clear:both; 36} 37 38/* 左枠・ドロップ枠 */ 39#dropArea { 40 padding: 10px; 41 border-style:solid; 42 border-width:3px; 43 border-color:red; 44 float:left; 45} 46 47/* 左枠・ドロップ枠 */ 48#dropArea ul { 49 list-style-type: none; 50 margin: 0; 51 padding: 5px; 52 margin-bottom: 10px; 53} 54 55#dropArea li { 56 margin: 5px; 57 padding: 5px; 58 width: 70px; 59 display: inline; 60} 61 62#sort-drop-area { 63 /*width: 552px;*/ 64 padding: 5px 0; 65 border: 1px dashed yellow; 66 /*border-radius: 10px;*/ 67 border-width: 3px; 68} 69 70 --> 71 72 </style> 73</head> 74 75<body> 76<div id="waku"> 77 78 <h1>Drag And Drop Sample</h1> 79 80 <!-- Dropエリア --> 81 <div id="dropArea" > 82 <h3>枠内に要素をドロップする。ブレスレッドとしてビーズを環状に追加したい</h3> 83 <ul id="sort-drop-area" > 84 <li class="ui-state-default"> 8586 </li> 87 <li class="ui-state-default"> 8889 </li> 90 </ul> 91 </div> 92 93 <!-- Dragエリア --> 94 <div id="dragArea"> 95 <h3>要素をドラッグする</h3> 96 97 ●ビーズ一覧にする予定 98 <ul> 99 <li id="insert-object" class="ui-state-highlight"></li> 100 <li></li> 101 </ul><br /> 102 </div> 103 <div class="clear"></div> 104 105 <input type="button" value="Check" onclick='fncPutCtrl();'> 106</div> 107 108<script> 109 window.onload = function() { 110 111 // 112 jQuery( '#sort-drop-area' ) . sortable( { 113 revert: true 114 } ); 115 116 // クラスはクローン可、IDは不可。 117 jQuery( '#dragArea' ).find('img,li,div').draggable( { 118 connectToSortable: '#sort-drop-area', 119 helper: 'clone', 120 revert: 'invalid', 121 } ); 122 123 // 124 jQuery( '#dragArea' ) . disableSelection(); 125 126 } 127 128 var fncPutCtrl = function () { 129 //alert("Hello world!"); 130 console.log( document.body ); 131 } 132 133</script> 134 135</body> 136</html>

試したこと

文字をアーチ型に配置できるjquery(Arctext.js)も試してみましたが、本システムには合いませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/11/25 08:05 編集

どこまで考えて設計されてますか? 画面上でオーダーメイドチックに表示ができたとして、それを注文する仕組みまで考慮されてますか? (要は画面上で作ってみて終わり、だとシステムにはなってないのではという細かい指摘です)
yagiyogi

2019/11/25 08:12

早速の書き込み、ありがとうございます。 注文する仕組みも考慮してます。 追加した要素を取得し追加したビーズの数や種類を読み取る処理を組み込む予定ですが、それは自分の方で出来そうです。
guest

回答1

0

要素を環状に追加する方法がわからず頓挫

こちらの質問内容 は参考になるかもしれませんね。

具体的な回答に至らず、申し訳ありません。

投稿2019/11/30 22:20

AkitoshiManabe

総合スコア5432

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yagiyogi

2019/12/02 00:17

ご回答ありがとうございます。 jquery等では出来ず、自分で座標計算して一から作り込むしかなさそうですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問