sortablejs

testing basic functionality

by bturner1273

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<html>

  <head>
    <title>sortablejs</title>
  </head>

  <body>
    <ol id="my_list" class="list-group">
      <li class="list-group-item" data-id="0">option 1</li>
      <li class="list-group-item" data-id="1">option 2</li>
      <li class="list-group-item" data-id="2">option 3</li>
      <li class="list-group-item" data-id="3">option 4</li>
      <li class="list-group-item" data-id="4">option 5</li>
    </ol>
  </body>

</html>

CSS

body.dragging,
body.dragging * {
  cursor: move !important;
}

.dragged {
  position: absolute;
  opacity: 0.5;
  z-index: 2000;
}

ol.sortable li.placeholder {
  position: relative;
}

ol.sortable li.placeholder::before {
  position: absolute;
}

JavaScript

var group = $('#my_list').sortable({
  group: 'serialization',
  pullPlaceholder: false,
  // animation on drop
  onDrop: function($item, container, _super) {
    var $clonedItem = $('<li/>').css({
      height: 0
    });
    $item.before($clonedItem);
    $clonedItem.animate({
      'height': $item.height()
    });

    $item.animate($clonedItem.position(), function() {
      $clonedItem.detach();
      _super($item, container);
    });
    console.log(group.sortable('serialize').get(0).filter(i => i['id'] !== undefined).map(i => i.id));
    //this is my issue, to array is returning a list of 
    //jquery objects
    console.log(group.sortable('toArray', { attribute: 'data-id' }));
  },

  // set $item relative to cursor position
  onDragStart: function($item, container, _super) {
    var offset = $item.offset(),
      pointer = container.rootGroup.pointer;

    adjustment = {
      left: pointer.left - offset.left,
      top: pointer.top - offset.top
    };

    _super($item, container);
  },
  onDrag: function($item, position) {
    $item.css({
      left: position.left - adjustment.left,
      top: position.top - adjustment.top
    });
  }
});