ピースをドラッグ＆ドロップさせる(jQuery-UI使用) (KATAMINOを解くプログラムを作成する)

★前回の記事

yucatio.hatenablog.com

前回までで、選択用のピースを画面に表示させることができました。今回はピースをドラッグ＆ドロップさせる処理を追加します。

draggableとdroppableの設定

jQuery-UIのdroppableのページを参考に、ピースをドラッグ＆ドロップするコードを書いていきます。 draggable-pieceクラスを付与したピースをドラッグ可能にします。 ドロップ可能な範囲にドロップされない場合には、元の位置に戻したいので、revert: "invalid"を指定しています。

unused-piece-droppableとused-piece-droppableをドロップ可能にします。 hoverClassプロパティにそれぞれドロップ領域に重なった時のクラスを記載します。used-piece-droppableのhoverClass: "hover"は後で定義します。

js/mian.jsの以前のコードは全て削除します。

js/main.js

$( function() {
  initializer.setEvent()
})

const initializer = {
  setEvent: () => {
    $(".draggable-piece").draggable({
      revert: "invalid"
    })

    $("#unused-piece-droppable").droppable({
      hoverClass: "bg-light",
      accept: ".draggable-piece",
    })

    $("#used-piece-droppable").droppable({
      hoverClass: "hover",
      accept: ".draggable-piece",
    })
  },
}

js/main.jsを読み込みます。

index.html

<!-- 前略 -->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    <!-- 追加 -->
    <script src="js/main.js"></script>
  </body>
</html>

main.cssに#used-piece-droppable.hoverの設定を追加します。こうすることで、ドロップされるときオレンジが少し濃くなります。

css/main.css

#used-piece-droppable.hover {
  background-color: #ffecb3;
}

ここまでの動作確認

実行結果です。ピースがドラッグできるようになっています。

しかし、使わないピースを使うピースにドラッグしていくと、使うピースのcardの後ろにピースが隠れてしましました。

z-indexで重なりの順番を調整する

ピースがcardの後ろに隠れてしまう現象を解消するために、draggable-pieceにz-indexの設定を追加します。z-indexはhtmlの要素の重なり順を調整するパラメータです。今回は10にしています。

css/main.css

.draggable-piece {
  z-index: 10;
}

動作確認

実行結果です。ドラッグしてもピースが隠れずに移動できました。

以上でjQuery-UIを使用してピースをドラッグ＆ドロップさせることができました。

【 ポイント11倍 】 Gigamic（ギガミック）社 カタミノ KATAMINO 3歳〜 (ネコポス不可) ※消費税10%価格に変更済ページです。 価格：6160円（税込、送料無料) (2019/10/7時点) 楽天で購入

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com