つらい・・・

gridstack.jsについて教えてください。

締切済

質問者：tanagoda0505
質問日時：2017/02/24 11:22
回答数：2件

gridstack.jsというライブラリーを使おうと思っているのですが、ボックスが上詰めになっていて、左詰めにできなくて本当に困っています。どうしたらよいのでしょうか？もし知っている方がいましたらご教授お願い致します。

【内容】
建物の断面図を表したいです。
建物の階数と部屋の所在位置は、あらかじめ設定してある情報を元に配置出来ますが、その後の編集をgridstack.jsで行おうと思ってます。
ただ、gridstack.jsでは上詰めになっているので、たとえば302号室を横にずらした時に301号室が下にずれてしまいます。
それを301号室と302号室の位置を入れ替えるような動作にすることは可能でしょうか？
(上詰めではなく、左詰めもしくは右詰めにすることは可能でしょうか？)

もし知っている方がいましたら、教えていただけると幸いです。
何卒よろしくお願い致します。

gridstack.js
https://troolee.github.io/gridstack.js/

補足日時：2017/02/24 17:45
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2017/02/27 11:15

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>

- 0
- 件

通報する

参考程度に

No.1

回答者： fujillin
回答日時：2017/02/24 17:04

こんにちは

配布元だったサイトが移動したのか閉鎖したみたいなので、よくわかりませんが…

単に左詰めor右詰めでよければ、画面を右（または左）に90度回転したつもりで、上を左（または右）と考えるだけで、何もしなくても解決しそうな気がしますが…

「そんなのじゃダメだよ」とおっしゃるのであれば…
実際の利用方法がよくわかりませんが、左右にしか移動しないような雰囲気ですので、gridstackを複数（階ごとに）設定すれば、画面を回転して考えなくてもよさそうですね。
（gridstackが複数設置できるように作成されているのかどうかは知りませんが）

もしも、このアイデアでよければ、gridstackで実現できないとしても、drag系のライブラリで似たようなものがあると思いますので、複数設置が可能なものを探せばできるものと思います。

例えばこんなの
https://jqueryui.com/sortable/#display-grid
例では上下3段（3×4）になっていますが、1段（1×4）のものを3個上下に重ねて設置するようなイメージで考えるのではいかがでしょうか？