急いでいます！

googleカンダーようにドラックした時間を取得する方法

締切済

質問者：39OK
質問日時：2020/08/21 22:48
回答数：1件

googleカンダーようにドラックした時間を取得する方法
がわかりません。ソースを表示しても長いjavascriptが書いてあり解読不能です
また、javascriptで選択範囲を取得できるのかもわかりません。
googleカンダーようにドラックした時間を取得する方法の簡単なコードを教えてください
応用するのでヒントで構いません。
現在日付と時間はtableでデザインしているのですが技術的に古いのでしょうか

通報する

この質問は特に30代・男性の方に
リクエストされています！
(回答を制限するものではありません。)

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

質問の本文を隠す

回答 (1件)

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

参考程度に

No.1

回答者： fujillin
回答日時：2020/08/28 15:39

こんにちは

タイトルや質問文を読んでも意味不明なのでスルーしていましたが、案の定、回答がつかないようなので・・・

＞googleカンダーようにドラックした時間～～
「カレンダー用に」なのか「カレンダーのように」なのかで内容が大分違ってきます。
（普通に読めば前者だろうけれど、意味がわからん）
また、「ドラックした時間」というのがいったいどこに存在するのかも不明ですね。
（どこかに、時間を記したものがたくさんあって、それをドラッグするものと読める）

とは言え、何となくの雰囲気から、何かの要素をタイムテーブルにドラッグ＆ドロップした際に、その時間を取得したいということかと勝手に解釈してみました。
HTML等の提示も無いので勝手に作成しましたが、tableで表を作成するのがかったるいので、大部分はスクリプトから作成しています。

＞簡単なコードを教えてください
とのことなので、スクリプトがなるべく簡単になるようにjQuery及びjQuery UIを利用しました。
直接関係のないHTMLやCSSの部分が長いですが、ドラッグ&ドロップを処理しているスクリプトは「//ドラッグ&ドロップ処理」以下の数行だけです。
（数行でも長いとなってしまうのなら、ほぼお手上げです。）

内容的に当たっているのかどうかすらわかりませんので、何かのご参考にでもなればと。
当たっていても、外れていても、あとは良しなに。

※ 左側にあるタスクを、テーブル内にドロップすると、表内に書き加えるというだけのものです。（重複していても、関係なく追加します。）
※ その際に、表の左端の時間（←これがご質問内容かと解釈）を付け加えます。
※ Fx79.0、Chrome84.0でテストしています。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style>
div.wrap{ display: flex; justify-content: space-around; }
div.taskbox{ width: 12vw; padding: 0.5vw; border: 1px solid gray; }
div.taskbox h4{ margin: 0; text-align: center;}
div.taskbox ul{ list-style-type: none; margin:0; padding: 0 0.3em; }
div.taskbox li{
margin: 0.8em 0; padding: 0 10px;
border: 1px solid gray; background-color: #DEF;
}

table.timeTable{ width: 70vw; border-collapse: collapse; }
table.timeTable, table.timeTable th, table.timeTable td{ border: 1px solid gray; }
table.timeTable tr td:first-child{ width: 6em; }
table.timeTable tr{ height: 3em; }
table.timeTable td p{ margin: 0 8px; }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5 …
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1 …
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1 …

<script>
$(function(){
// 時間テーブルの作成
let d = new Date(2000,1,1,8,0,0), e = new Date(2000,1,1,16,0,0)
while(d <= e){
let html = `<tr><th>${d.getHours()}:${("0"+d.getMinutes()).substr(-2)}
</th><td></td><td></td><td></td></tr>`;
$("table.timeTable tbody").append(html);
d.setHours(d.getHours() + 1);
};
$("table.timeTable thead th").each(function(){
$(this).css("width", $(this).css("width"));
});

//ドラッグ&ドロップ処理
$("div.taskbox li").draggable({containment:"div.wrap", helper:"clone"});
$("table.timeTable tbody td").droppable({
drop: function(event, ui){
$(this).append(`<p>${$(this).siblings().eq(0).text()} ${ui.draggable.text()}</p>`);
}
});
});
</script>
</head>
<body>
<div class="wrap">
<div class="taskbox">
<h4>Tasks</h4>
<ul>
<li>TaskA</li>
<li>TaskB</li>
<li>TaskC</li>
<li>TaskD</li>
<li>TaskE</li>
<li>TaskF</li>
</ul>
</div>

<table class="timeTable">
<thead>
<tr><td></td><th>8/28</th><th>8/29</th><th>8/30</th></tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>