JSFiddle - React, Tailwind, and code Playground

by hogyun

HTML

<div>
  <ul id="sortable_list">
    <li class="ui-state-default" hs_idx="1">
      <input type="hidden" name="hs_idx" value="1">
      <span>list 1</span>
      <div class="col-sm-12">
        <div class="sortable_gym">
          <div class="ui-state-default">
            <label class="reg_file" style="background-image: url('https://image.shutterstock.com/image-photo/silhouette-close-hand-holding-freedom-260nw-401354533.jpg');"><span>TEST1</span></label>
          </div>
          <div class="ui-state-default">
            <label class="reg_file" style="background-image: url('https://image.shutterstock.com/image-photo/silhouette-close-hand-holding-freedom-260nw-401354533.jpg');"><span>TEST2</span></label>
          </div>
        </div>
      </div>
    </li>
    <li class="ui-state-default" hs_idx="2">
      <input type="hidden" name="hs_idx" value="2">
      <span>list 2</span>
      <div class="col-sm-12">
        <div class="sortable_gym">
          <div class="ui-state-default">
            <label class="reg_file" style="background-image: url('https://image.shutterstock.com/image-photo/silhouette-close-hand-holding-freedom-260nw-401354533.jpg');"><span>TEST1</span></label>
          </div>
          <div class="ui-state-default">
            <label class="reg_file" style="background-image: url('https://image.shutterstock.com/image-photo/silhouette-close-hand-holding-freedom-260nw-401354533.jpg');"><span>TEST2</span></label>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

CSS

/* 슬라이드 리스트 */
#sortable_list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#sortable_list>li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  height: 1.5em;
}

html>body #sortable_list>li {
  height: 7em;
  line-height: 1.2em;
}

.ui-state-highlight {
  height: 1.5em;
  line-height: 1.2em;
}

/* 시설 리스트 */
.sortable_gym {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 131px;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}

.sortable_gym>div {
  margin: 3px 3px 3px 0;
  padding: 1px;
  /*float: left;*/
  display: inline-block;
  width: 100px;
  height: 90px;
  font-size: 1em;
  text-align: center;
}

.sortable_gym>div>label {
  background-size: cover;
  opacity: 1;
  width: 90px;
  height: 80px;
}

.sortable_gym>div>label>span {
  background-color: wheat;
  display: inline-flex;
}

JavaScript

$(document).ready(function() {
  $("#sortable_list").sortable({
    placeholder: "ui-state-highlight",
    start: function(e, ui) {
      // 이동 시킬 아이템 클릭 
      $(this).attr('data-previndex', ui.item.index()); // 기존 순서값을 data-previndex에 저장
    },
    update: function(e, ui) {
      // 이동 완료 후,  순서를 서로 바꿔줌
      var newOrd = Number(ui.item.index());
      var oldOrd = Number($(this).attr('data-previndex'));
      var hs_idx = $(`input[name=hs_idx]:eq(${newOrd})`).val(); // item group key

      console.log(hs_idx, newOrd, oldOrd);
    }
  });
  $("#sortable_list").disableSelection();

  $(".sortable_gym").sortable({
    placeholder: "ui-state-highlight",
    scroll: true,
    scrollSensitivity: 100,
    scrollSpeed: 100,
    axis: 'x',
    handle: 'label', // label 태그로 핸들링
    start: function(e, ui) {
      // 이동 시킬 아이템 클릭 시
      $(this).attr('data-previndex', ui.item.index()); // 기존 순서값을 data-previndex에 저장
    },
    update: function(e, ui) {
      // 이동 완료 후,  순서를 서로 바꿔줌
      var newOrd = Number(ui.item.index());
      var oldOrd = Number($(this).attr('data-previndex'));
      var hs_idx = Number($(this).parents("input[name=hs_idx]").val()); // item group key

			// TODO hs_idx 여기를 가져오고 싶어요
      console.log(hs_idx, newOrd, oldOrd);
    }
  });
  $(".sortable_gym").disableSelection();
});