JSFiddle - React, Tailwind, and code Playground

by terby

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
<div class="asdf">
  <div class="primer picks-container">
    <div class="pick">Item 1</div>
    <div class="pick">Item 2</div>
    <div class="pick">Item 3</div>
  </div>

  <div class="seconder picks-container">
    <div class="pick">Item 4</div>
    <div class="pick">Item 5</div>
    <div class="pick">Item 6</div>
  </div>
</div>
<br><br><br>
<div class="qwer">
  <div class="primer picks-container">
    <div class="pick">Item 1</div>
    <div class="pick">Item 2</div>
    <div class="pick">Item 3</div>
  </div>

  <div class="seconder picks-container">
    <div class="pick">Item 4</div>
    <div class="pick">Item 5</div>
    <div class="pick">Item 6</div>
  </div>
</div>

CSS

.asdf {
  position: fixed;
  left:300px;
  top: 100px;
}
.qwer {
  position: fixed;
  left:300px;
  top: 300px;
}
.picks-container {
    width: 600px;
    min-height: 100px;
    padding: 10px;
    margin: 10px;
    background: #f0f0f0;
    border: 2px dashed #ccc;
    display: inline-block;
    vertical-align: top;
}

.pick {
    background: white;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ddd;
    cursor: pointer;
    user-select: none;
    width: 100px;
    float: left;
}

JavaScript

// Tüm primer ve seconder'ları seç
$('.primer, .seconder').each(function() {
  // Parent'ın class'ını al ve grup adı yap
  const parentClass = $(this).parent().attr('class');
  const groupName = 'group-' + parentClass;
  
  new Sortable(this, {
    group: groupName,  // ← Parent'a göre dinamik grup adı
    animation: 150,
    onEnd: function (evt) {
      const fromClass = evt.from.className;
      const toClass = evt.to.className;
      const item = evt.item.textContent;
      
      if (fromClass.includes('primer') && toClass.includes('seconder')) {
        alert(`"${item}" Primer'den Seconder'e taşındı! 🟢`);
      } else if (fromClass.includes('seconder') && toClass.includes('primer')) {
        alert(`"${item}" Seconder'dan Primer'e taşındı! 🔵`);
      }
    }
  });
});