import { Controller } from "@hotwired/stimulus";
import Sortable from "sortablejs";
export default class extends Controller {
 static targets = ["container"];
 connect() {
 this.sortable = Sortable.create(this.containerTarget, {
 animation: 150,
 handle: ".drag-handle",
 group: this.element.dataset.sortableGroup || null, // Enable cross-container dragging if group is defined
 onEnd: this.reorder.bind(this), // Trigger reordering
 });
 }
 reorder(event) {
 const new_items = Array.from(event.to.children);
 const items = Array.from(event.from.children);
 // Update sort order and parent course section (if applicable) in the list the item moved to
 new_items.forEach((item, index) => {
 const sortInput = item.querySelector("[data-sort-order]");
 const sectionInput = item.querySelector("[data-course-section-id]");
 if (sortInput) {
 sortInput.value = index; // Update sort_order based on position
 }
 if (sectionInput && event.to.dataset.courseSectionId) {
 sectionInput.value = event.to.dataset.courseSectionId; // Update parent task ID
 }
 });
 if(event.to !== event.from) {
 // Update sort order and parent course section (if applicable) in the list the item was moved from
 items.forEach((item, index) => {
 const sortInput = item.querySelector("[data-sort-order]");
 const sectionInput = item.querySelector("[data-course-section-id]");
 if (sortInput) {
 sortInput.value = index; // Update sort_order based on position
 }
 if (sectionInput && event.from.dataset.courseSectionId) {
 sectionInput.value = event.from.dataset.courseSectionId; // Update parent task ID
 }
 });
 }
 }
}
</div><div class="naked_ctrl">
<form action="/index.cgi/larger-text" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://topenddevs.com/assets/controllers/sortable_controller-b975577c.js">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://topenddevs.com/assets/controllers/sortable_controller-b975577c.js" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast">配色反転</option>
<option value="larger-text" selected="selected">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>