Javaエンジニア、React+Firebaseでアプリを作る

趣味で作ったものいろいろ

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

★前回の記事

yucatio.hatenablog.com

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

draggableとdroppableの設定

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

unused-piece-droppableused-piece-droppableをドロップ可能にします。 hoverClassプロパティにそれぞれドロップ領域に重なった時のクラスを記載します。used-piece-droppablehoverClass: "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;
}

ここまでの動作確認

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

f:id:yucatio:20191007110948p:plain

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

f:id:yucatio:20191007111001p:plain

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

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

css/main.css

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

動作確認

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

f:id:yucatio:20191007111012p:plain

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


★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com