knockout-contrib

:metal: KnockoutJS Goodies Monorepo

View the Project on GitHub Profiscience/knockout-contrib

bindings.draggable

Version Dependency Status Peer Dependency Status Dev Dependency Status Downloads

This package is intended for consumption via the @profiscience/knockout-contrib metapackage

Drag and drop list re-ordering

Usage

<ul class="draggable-list-container" data-bind="foreach: foos">
  <li class="draggable-item-container">
    <i
      class="fa fa-bars"
      data-bind="draggable: {
        listContainerSelector: '.draggable-list-container',
        itemContainerSelector: '.draggable-item-container',
        list: $parent.foos,
        item: $data
      }"
    ></i>
  </li>
</ul>
.draggable-list-container {
  /* position must be anything BUT static */
  position: relative;
}