20200215のCSSに関する記事は5件です。

HTML5のdraggable属性で自由にドラッグ&ドロップ

HTML5のdraggable属性とjavascriptを使用して自由にドラッグドロップできるようにしました。

下のコードを完コピしてもらえれば確認していただけると思いますが、

左側にドラッグ対象の要素(numberBox)が縦に20個並んでいるボックス(drop_back_box)があり、

右側には横長のボックス(dropBox)が縦に5個並んでいます。

numberBoxをdropBoxやdrop_back_boxにドラッグ・ドロップするのは簡単にできたのですが、

dropBoxに複数ドロップされたnumberBox間で左右にドラッグドロップできるようにするのに

かなり手こずってしまいました。

ドロップされたnumberBox間で左右にドラッグドロップするためにはnumberBox自体に

ondrop属性を持たせてjavascriptのinsertBeforeを使用することで簡単にできました。。。
こんな簡単なことをなぜすぐに気づかなかったのか。。。

HTML5のdraggable属性はドラッグした要素やドロップ先の要素の情報を取得できるのでかなり便利です。

コードは下記の通りです!

<style>
.left_box {
    width: 110px;
    height:700px;
    background:#fff;
    margin-right: 56px;
}

.drag_box {
    width: 100px;
    height: 30px;
    background: red;
    margin: 2px;
}

.right_box {
    background: #fff;
    height: 700px;
    width: 110px;
}

.drop_box {
    width:800px;
    height:38px;
    margin:2px;
    background:yellow;
    display: flex;
}
</style>

<!-- 左のボックス -->
<div style="display:flex;">
    <div class="left_box">
        <div class="drop_back_box" ondragover="dragover(event)" ondrop="dropBack(event)">
            <?php for ($i=1; $i < 21; $i++): ?>
                <div class="drag_box" id="numberBox<?php echo $i; ?>" draggable="true" ondragstart="f_dragstart(event)" ondrop="dropLR(event)">
                    ナンバー:<?php echo $i; ?>
                </div>
            <?php endfor; ?>
        </div>
    </div>


<!-- 右のボックス -->
    <div class="right_box">
        <?php $i=1; for($i=1; $i < 6; $i++): ?>
            <div id="dropBox<?php echo $i; ?>" class="drop_box" ondragover="dragover(event)" ondrop="drop(event)">
            </div>
        <?php endfor; ?>
    </div>

</div>
<script>
/***** ドラッグ開始時の処理 *****/
function f_dragstart(event){
    //ドラッグするデータのid名をDataTransferオブジェクトにセット
    event.dataTransfer.effectAllowed = 'move';
    event.dataTransfer.setData("text", event.target.id);
}

/***** ドラッグ要素がドロップ要素に重なっている間の処理 *****/
function dragover(event){
    event.dataTransfer.effectAllowed = 'move';
    //dragoverイベントをキャンセルして、ドロップ先の要素がドロップを受け付けるようにする
    event.preventDefault();
}

/***** 右のボックスにドロップ時の処理 *****/
function drop(event){
    // ドラッグされたデータのid名をDataTransferオブジェクトから取得
    const boxId = event.dataTransfer.getData("text");
    const numberBox = document.getElementById(boxId);
    const dropBox = event.currentTarget;
    dropBox.appendChild(numberBox);
    // エラー回避のため、ドロップ処理の最後にdropイベントをキャンセルしておく
    event.preventDefault();
};

function dropLR(event){
    // ドラッグされたデータのid名をDataTransferオブジェクトから取得
    const draggedEleId = event.dataTransfer.getData("text");
    // ドラッグされた要素を取得
    const draggedElement = document.getElementById(draggedEleId);
    // ドロップされた要素を取得
    const dropedElement = event.currentTarget;
    // ①ドロップ先の親要素のid名を取得
    const dropedParentId = event.currentTarget.parentNode.id;

    const dropBox = document.getElementById(dropedParentId);


    // 左のボックスに戻す時以外は要素間の左右にドロップできる処理
    dropBox.insertBefore(draggedElement, dropedElement)

    // エラー回避のため、ドロップ処理の最後にdropイベントをキャンセルしておく
    event.preventDefault();
    event.stopPropagation();
};


// 左のボックスにドロップする処理
function dropBack(event){
// エラー回避のため、ドロップ処理の最後にdropイベントをキャンセルしておく
    event.preventDefault();
}
</script>

まだまだ自分の応用力のなさを痛感してばかりですが、これからもプログラミング頑張ろうと思います!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

htmlタグをcssで表示非表示

htmlタグをcssで表示非表示

非表示にするやり方は2種類あります。

visibilityで

visibilityを使うと、実際にそこにあるけど見えなくなるので、空白が生まれます。

  • css
#abc { visibility: hidden; }   /* 非表示 */
#abc { visibility: visible; }   /* 表示 */
  • ボタンで制御
<input type="button" value="表示"
       onclick="document.getElementById('abc').style.visibility = 'visible';">
<input type="button" value="非表示"
       onclick="document.getElementById('abc').style.visibility = 'hidden';">

displayで

こちらはvisibilityとは違い、DOMそのものがなくなります。

  • css
#xyz { display: none; }   /* 非表示 */
#xyz { display: inline; }   /* インラインで表示 */
#xyz { display: block; }   /* ブロックで表示 */
  • ボタンで制御
<input type="button" value="表示"
       onclick="document.getElementById('xyz').style.display = 'inline';">
<input type="button" value="非表示"
       onclick="document.getElementById('xyz').style.display = 'none';">
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

table) かんたんなレスポンシブルテーブル

col使ってますか

<table>タグの中にちゃんと<col>を入れていますか?
自分は<col>の存在を知るまで数年かかりました。
使ってみたら本当に便利だったのでまずは基本的な使い方から。

See the Pen JjdGvgg by sphenisc (@sphenisc) on CodePen.

本来CSSでthやtdの長さを指定していと中身のテキスト量に応じて自動でthやtdの横幅が変化するのですがcolにそれぞれ25% 25% 50%と指定しているためキレイに表示できています。
widthの数値を変更してもこの割合は維持されるので最近のレスポンシブ環境の適正が高そうです。

応用

See the Pen RwPrBWM by sphenisc (@sphenisc) on CodePen.

SP幅にすると変形するテーブル

See the Pen MWwKNEO by sphenisc (@sphenisc) on CodePen.

このぐらいの文字数なら変形しないほうが見やすいですが文字数が増えると便利。かも

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

かんたんなレスポンシブルテーブル

col使ってますか

<table>タグの中にちゃんと<col>を入れていますか?
自分は<col>の存在を知るまで数年かかりました。
使ってみたら本当に便利だったのでまずは基本的な使い方から。

See the Pen JjdGvgg by sphenisc (@sphenisc) on CodePen.

本来CSSでthやtdの長さを指定していと中身のテキスト量に応じて自動でthやtdの横幅が変化するのですがcolにそれぞれ25% 25% 50%と指定しているためキレイに表示できています。
widthの数値を変更してもこの割合は維持されるので最近のレスポンシブ環境の適正が高そうです。

応用

See the Pen RwPrBWM by sphenisc (@sphenisc) on CodePen.

SP幅にすると変形するテーブル

See the Pen MWwKNEO by sphenisc (@sphenisc) on CodePen.

このぐらいの文字数なら変形しないほうが見やすいですが文字数が増えると便利。かも

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

はじめまして!

マッキーです!
ブログを書くの人生初のなんですけど、何かのきっかけになればと思い書き始めました?‍♂️
今は、HTML/CSS,jQuery,Sassの勉強をしていて学習した内容を、アウトプットしていこうと思っています。
間違ってる部分とかあったらDMでコソッと教えてください?

今は、この?jQueryの本を勉強してます。
D46A4695-DAA3-424C-87BC-F700883ECAE7.jpeg

本当に頭悪いんですけど、一生懸命やってるので温かい目で見てやってください?‍♂️?
よろしくお願いします。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む