画像のような画面のセルをドラッグで選択するときに、最大で2列分だけしか選択できないようにしたいと思っています。施設管理のサイトを作りたいと思っています。先ほどした質問でドラッグ
できる位置を指定ができるようになったのですがドラッグできる範囲も指定したいのです。
日付をまたいで選択できないようにしたいと思っています。これは、選択しているセルは、色が変わるのですが、できれば日付をまたぐと色が変わらず、選択できないようにしたいです。
ですが選択できても、範囲を決定したときに、エラーメッセージが出てくるというような方法でもかまいません。
厚かましいかもしれませんがお願いします。
以下は
</tytle>までのひながた以降のコードです。
わかる方よろしくお願いします。画像の空白部には24×30のセルがあります。
<table>~</table>の間には画像のような<td></td>のタグがあります。
よろしくお願いします。
<style type="text/css">
html, body{
margin:0px;
}
table{
-moz-user-select:none;
-khtml-user-select:none;
user-select:none;
width:500px;
height:500px;
}
table, td, th{
margin:10px;
border-style:solid;
border-color:black;
border-width:1px;
}
</style>
<script type="text/javascript">
var startCell = null;
//マウスダウンのイベント処理
function mouseDown(table, e){
if (!e) var e = window.event;
startCell = e.srcElement? e.srcElement: e.target;
if(startCell.tagName != "TD"){
startCell = null;
return;
}
mouseMove(table, e);
}
//マウスアップのイベント処理
function mouseUp(table, e){
if (!e) var e = window.event;
var endCell = e.srcElement?e.srcElement:e.target;
if(!(endCell.tagName=="TD" && startCell))
return false;
//セルの位置を取得
var from = getCellPos(table, startCell);
var to = getCellPos(table, endCell);
if(!from || !to)
return false;
//mouseMoveで選択状態表示の更新をさせないようにする
startCell = null;
//ここに選択後の処理を書く
alert("("+from.col+", "+from.row+") -> ("+to.col+", "+to.row+")");
}
//マウス移動のイベント処理
function mouseMove(table, e){
if (!e) var e = window.event;
var endCell = e.srcElement?e.srcElement:e.target;
if(!(endCell.tagName=="TD" && startCell))
return false;
//セルの位置を取得
var from = getCellPos(table, startCell);
var to = getCellPos(table, endCell);
if(!from || !to)
return false;
//色を変更
var x, y, cells;
for(y=0; y<table.rows.length; y++){
row = table.rows.item(y);
for(x=0; x<row.cells.length; x++){
if((from.row-y)*(y-to.row)>=0 && (from.col-x)*(x-to.col)>=0)
row.cells.item(x).style.backgroundColor = "#ffdddd";//選択状態の色
else
row.cells.item(x).style.backgroundColor = "transparent";//未選択状態の色
}
}
}
//tableの中のcellの位置を取得する
function getCellPos(table, cell){
var pos = new Object();
if(cell.nodeName == "TD"){
var x, y, cells;
for(y=0; y<table.rows.length; y++){
row = table.rows.item(y);
for(x=0; x<row.cells.length; x++){
if(row.cells.item(x) == cell){
pos.row = y;
pos.col = x;
return pos;
}
}
}
}
return null;
}
</script>
</head>
<body><!-- Google Analytics Start -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-9296140-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
<!-- Google Analytics End -->
<table onmousedown="mouseDown(this, event); return false;" onmouseup="mouseUp(this, event);" onmousemove="mouseMove(this, event); return false;">
</table>
</body>
</html>
No.1ベストアンサー
- 回答日時:
さきほどの回答者ですが…
>最大で2列分だけしか選択できないようにしたいと思っています
う~~ん。
それって、もしかすると選択できる2列がセットになっているのではないですか?
(2列目、3列目)、(4列目、5列目)・・・というのであって(3列目、4列目)の2列ではダメとか。
・・・と勝手に解釈して、今回は2箇所変更。
1)先ほどの箇所
pos.row = y;
pos.col = x;
pos.day = (x+1 - (x+1)%2) / 2; //←この行を追加
if(2>y || 1>x) pos = null;
2)「//セルの位置を取得」の少し下の
if(!from || !to) の行を
if(!from || !to || from.day != to.day)
に変更
多分、これで大丈夫だと思いますが・・・
どうも、テーブル外(または、選択禁止セル範囲内)でマウスアップしてみるとわかりますが、必ずしも操作性が良いとは思えません。
また、
>施設管理のサイトを作りたいと思っています。
ということなので、あえて書きますが、現在のような逐次的な修正は地道に進んでいるように思えるかも知れませんが、方法としてあまり良い方法とは思えません。
サイトの利用者がこれを利用して予約入力したりするのでしょうか?
あるいは限られた管理者だけが操作するものと仮定しても、予約済みの部分に誤って上書きしない方法はどのように考えていますか?
一つの予約時間帯をグループとして認識できるようにする方法は?
何よりも、クライアント側で入力したものを記録しておく方法はどのようにお考えなのでしょうか?(サーバなどにデータを保管しておく方法)
また、その情報(サーバ上の情報)をクライアントで表示する方法は?
サイトと言うからには、複数の場所からアクセス可能だと思いますが、ほぼ同時に同じ時間帯への予約があった場合は?
などなど、全体の流れとそれを実現する方法をまとめた上で部分の作成にかからないと、次の問題を解決しようとするたびにそれまでのものを捨てて一から作らなくてはならない羽目に陥る可能性があります。
あるいは、それまでのものに固執するあまり継ぎ足しで、とんでもないものが出来上がる可能性も。
またしても回答ありがとうございます^^
本当に助かります^^
他の言語(php)での方法では、少なからず時間の重複などの場合の制限やデータの保存などできているのですが、いかんせんユーザーインターフェースに乏しいもので^^;
この方法と組み合わせたりなどして、作っていきたいと思っています。
何かいい方法があるなどの意見ありましたら、とても助かります^^;
本当にありがとうございます^^
No.2
- 回答日時:
#1です。
内容を理解していないので、的外れかもしれませんが…
>いかんせんユーザーインターフェースに乏しいもので^^;
インターフェースに関わる部分だけについて、とりあえず感じたことを。
・マウスに反応しない部分(タイトル部分や予約済み部分)のセルを識別できるようにしておけば、スクリプトはそれのチェックと日にちを跨がないチェックだけでいけるのではないでしょうか?(具体的にはクラス設定をしておくとか。そのほうが最終的にはスクリプトも単純になるかと思います。)
・上記による識別で、タイトル部分の表示書式や予約済みの部分の表示をCSSで指定しておくことで、位置に関わらず反映することができそう。
既予約のグルーピングも同様のことで識別できると思われます。(例:クラス指定を利用するとしてclass="reserved group1"とか)
・ドラッグのインターフェースとしては、選択対象外(表の外も含む)でマウスアップが行なわれたら、その状態でFixするかキャンセルしてしまった方がわかりやすいのではないでしょうか。
例えば、対象外でマウスアップされたらキャンセルしてしまい、正しい範囲でマウスアップされたらそのまま必要事項の入力ダイアログが表示されるとか。
・画面表示に関して、ご提示のサンプル(単なるサンプルかも知れませんが)では、均質のセルがずっと並んでいるので右側、下側のセルほど位置を間違えやすいと思われます。
1日の単位(2列単位?)がわかるように区切りを入れたり、1週間単位での区切りを入れたり、土日祝日がわかるようになっていたり…
時間についても同様に何らかのガイドの線があるほうが見やすいと思います。(少なくとも正午の区切りぐらい)
・表の右側が時間と対象しやすいように時間部分の表示は固定しておいて、表を左右にスクロール可能なようにしてあげた方が間違えが少なくなるかと思います。
まぁ、個人の勝手な思いつきレベルの意見なので、参考にもならないとは思いますが・・・
ありがとうございます^^
ファン登録させていただきました^^
いろいろなアドバイスなど本当にありがとうございます^^
もしよろしければ、これからも、アドバイスお願いいたします^^
こんなにもお世話になっているので、完成したときや、進んだときなどに近況報告させていただいてもよろしいですか?
そこでまたアドバイスなどいただけたら嬉しいです^^
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
第3日曜日のみの日付を取得、...
-
javaScript textareaの一行あた...
-
択一形式のテストをつくりたいです
-
分岐処理(アルゴリズム)
-
特定のclassを表示、非表示にする
-
Javascript で可能でしょうか
-
APIを使って埋め込んだグーグル...
-
ASP.NETのコントロールの値をJa...
-
GoogleMap 住所から座標の取得
-
商品コードを入力で、商品名、...
-
javascriptにお詳しい方に質問...
-
アルファベットABCD…をスマート...
-
JavaScriptのindexedDBに格納し...
-
なぜmatchメソッドがエラーにな...
-
ホームページの最終更新日を他...
-
ページ最終行へジャンプする方法
-
GASでGoogleフォームの自動返信...
-
functionから別のfunctionを実...
-
javascriptで自動計算フォーム...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
メールフォームの日付入力フォ...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
GASでGoogleフォームの自動返信...
-
なぜmatchメソッドがエラーにな...
-
翌月を取得するGASが分かりません
-
ローカルにあるファイルを検索...
-
HTMLで作った時報アプリが動き...
-
ASP.NETのコントロールの値をJa...
-
C# 演算 奇数と偶数 表現の仕方
-
html javascript リンク先アド...
-
gas スプレッドシートがアクテ...
-
javascriptでテーブルに追加し...
-
VSCODE[Python]の設定について
-
JavaScriptで決まった「時刻」...
-
ASP.NET MVCでObjectをjsに渡す
-
イベントが初めの一回しか起き...
-
jqGridについて
おすすめ情報