draggableで要素をドラッグアンドドロップで移動する【jQuery】

JavaScript

2024.05.26

デモ
1. 仕様
コード解説
1. CDN
  1. 必要なCDN一覧
  2. 読み込みコード
2. コード本体
参照

デモ

See the Pen Untitled by masahiro nomura (@masahiroview) on CodePen.

仕様

背景オレンジの要素をドラッグで移動可能。
移動範囲は親要素（黒い枠線）の範囲内とする。
移動中は、枠線の左上からの位置を表示する。
移動終了後はテキストが元に戻る。

コード解説

CDN

必要なCDN一覧

・jQuery
・jQuery UI

読み込みコード

//jQuery本体
<script
  src="https://code.jquery.com/jquery-3.7.1.js"
  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
  crossorigin="anonymous"></script>

//jQuery UI（JS）
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

//jQuery UI（CSS）
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73FSlhmquFlUOuMSoXz5IRw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

コード本体

HTML

<p>↓枠線の範囲上で移動するよ</p>
<div id="draggable-wrapper">
  <div class="draggable-content">
    <p>移動可能なelement</p>
  </div>
</div>

CSS

#draggable-wrapper{
  width:300px;
  height:150px;
  border:1px solid black;
}

.draggable-content{
  width:220px;
  display:inline-block;
  background-color:orange;
}

.draggable-content p{
  text-align:center;
}

JavaScript（jQuery）

$(".draggable-content").draggable({
   containment: "parent",

   //ドラッグ開始時
   start: function (event, ui) {
          console.log("drag開始");    
   },

   //ドラッグ中
   drag: function(event, ui) {
         console.log("drag中");    
         let parentOffset = $(this).parent().offset();
         let relativeLeft = ui.offset.left - parentOffset.left;
         let relativeTop = ui.offset.top - parentOffset.top;
         $(".draggable-content p").text('左から'+relativeTop+'px。上から'+relativeTop+'px');
   },

   //ドラッグ終了時
   stop: function (event, ui) {
         console.log("drag終了"); 
         $(".draggable-content p").text('移動可能なelement');
   },
});