gridstack.jsというライブラリーを使おうと思っているのですが、ボックスが上詰めになっていて、左詰めにできなくて本当に困っています。どうしたらよいのでしょうか?もし知っている方がいましたらご教授お願い致します。
【内容】
建物の断面図を表したいです。
建物の階数と部屋の所在位置は、あらかじめ設定してある情報を元に配置出来ますが、その後の編集をgridstack.jsで行おうと思ってます。
ただ、gridstack.jsでは上詰めになっているので、たとえば302号室を横にずらした時に301号室が下にずれてしまいます。
それを301号室と302号室の位置を入れ替えるような動作にすることは可能でしょうか?
(上詰めではなく、左詰めもしくは右詰めにすることは可能でしょうか?)
もし知っている方がいましたら、教えていただけると幸いです。
何卒よろしくお願い致します。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
ANo1です。
>ちなみにこれは大きさの変更は出来ますでしょうか?
HTMLのブロック要素であれば、大きさ(サイズ)の指定はできます。
(細かく指定すれば個別にサイズを変えることも可能です)
使い方がよくわからないのですが、どうやら横方向の移動のみでもよさそうですので、以下に横列単位のものを何段か重ねた例を挙げておきます。
※ ANo1で挙げたsortableを利用しています。
※ 行数(段数)が増えてもHTMLを追加するだけで済みます。
※ 列数が増えても同様ですが、ULの幅を調節する必要があります。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
#sortable{ margin:50px; }
#sortable>ul{
list-style-type:none; width:500px;
margin:0; padding:0;
}
#sortable>ul:after{
content: "."; display:block;
font-size:0; height: 0;
clear: both;
}
#sortable li{
width:80px; height:80px;
margin:6px 1px; padding:5px;
float:left;
background-color:#BDD;
border:1px solid #000;
border-color:#DFF #688 #688 #DFF;
font-size:1.2em; font-weight:bold;
}
#sortable ul:first-child li{ width:104px; }
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"> …
<script type="text/javascript">
$(function(){ $("#sortable>ul" ).sortable(); });
</script>
</head>
<body>
<div id="sortable">
<ul>
<li>401</li><li>402</li><li>403</li><li>404</li>
</ul>
<ul>
<li>301</li><li>302</li><li>303</li><li>304</li><li>305</li>
</ul>
<ul>
<li>201</li><li>202</li><li>203</li><li>204</li><li>205</li>
</ul>
<ul>
<li>101</li><li>102</li><li>103</li><li>104</li><li>105</li>
</ul>
</div>
</body>
</html>
No.1
- 回答日時:
こんにちは
配布元だったサイトが移動したのか閉鎖したみたいなので、よくわかりませんが…
単に左詰めor右詰めでよければ、画面を右(または左)に90度回転したつもりで、上を左(または右)と考えるだけで、何もしなくても解決しそうな気がしますが…
「そんなのじゃダメだよ」とおっしゃるのであれば…
実際の利用方法がよくわかりませんが、左右にしか移動しないような雰囲気ですので、gridstackを複数(階ごとに)設定すれば、画面を回転して考えなくてもよさそうですね。
(gridstackが複数設置できるように作成されているのかどうかは知りませんが)
もしも、このアイデアでよければ、gridstackで実現できないとしても、drag系のライブラリで似たようなものがあると思いますので、複数設置が可能なものを探せばできるものと思います。
例えばこんなの
https://jqueryui.com/sortable/#display-grid
例では上下3段(3×4)になっていますが、1段(1×4)のものを3個上下に重ねて設置するようなイメージで考えるのではいかがでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- 家具・インテリア 収納について教えてください 1 2022/11/19 20:44
- Windows 10 タスクバー上に表示されたアドレス・ボックス? 1 2023/04/30 17:37
- 中古パソコン PC作業の環境(ハード)について 3 2022/12/20 18:12
- その他(パソコン・周辺機器) 簡易水冷のラジエーターの設置場所、方向について 2 2022/12/05 15:17
- JavaScript 指定時間になったら、WEBサイトの更新を自動で行うには…? 3 2022/04/28 22:14
- 一戸建て 現在、新築の照明計画をしているところです。 住宅メーカーからの照明計画の図面がこれでいいのかさっぱり 4 2022/10/01 22:05
- 大学・短大 続報 以前大学編入後に生じた問題から、こちらに質問 させていただいたものです。 詳しくご存知ない方に 1 2023/06/24 15:19
- Excel(エクセル) Excel ヘルプの[ロック解除]、<c0>、</c0> の意味は何ですか? 1 2023/02/20 16:58
- 画像編集・動画編集・音楽編集 Google Earth Pro 高速道路上空を一定の速度で飛ぶツアー動画の作り方は?? 1 2022/06/01 15:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
クリックした<a>タグのみにClas...
-
【javascript で動的に a タグ...
-
jQueryのhide,showで中の要素が...
-
jquery ドロップダウンメニュー...
-
どの<li><a> が押されたか判別...
-
javascriptでフォーカスを当て...
-
「jQuery」アコーディオンメニ...
-
MAX関数を使ってからLEFT JOIN...
-
Vb.net2005での画像の合成方法
-
c++std::string型をTCHARに変換...
-
HTMLからimgのsrcのみを正規表...
-
IplImageのBmp変換。
-
<div ~ </div> で囲まれたテキ...
-
IFRAMEの表示/非表示を切り替え...
-
動的にHTMLコンテンツを吹き出...
-
変数名をどのようにつけるのが...
-
jQueryでシンプルドラッグドロ...
-
プルダウンの位置がwin/macでず...
-
クリックで色変更後に既に変更...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
「jQuery」アコーディオンメニ...
-
javascript テキストエリアを1...
-
jquery ドロップダウンメニュー...
-
jQueryでネスト構造の<li>がク...
-
クリックした<a>タグのみにClas...
-
jQueryの配列の渡し方について
-
for(var i=0;...) の i の値を...
-
JavaScriptによる疑似プルダウ...
-
jQueryのeqで最後からn番目以降...
-
javascriptでEnterキーをtabキ...
-
Jquery タブで、4つのliのうち...
-
【javascript で動的に a タグ...
-
どの<li><a> が押されたか判別...
-
マウスオーバーで開閉できるア...
-
同一ページ内で、任意の文字列...
-
jqueryプルダウンメニュー個別着色
-
JavaScript インクリメントの書...
-
複数の画像をランダム(シャッ...
-
タブ切り替えの初期表示について
おすすめ情報
gridstack.js
https://troolee.github.io/gridstack.js/