jQury UI Sortable

by rafalry

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
<ul class="eb-sequence-container ng-pristine ng-valid ui-sortable eb-sequence-orientation-horizontal" ng-class="{'eb-sequence-orientation-horizontal':interaction.orientation=='horizontal'}" ng-form="form">
  <li class="eb-sequence-item ng-scope" ng-repeat="item in interaction.items" value="1" style="">
    <label eb-content-block="item.value">Antwoord 2</label>
  </li>
    <li class="eb-sequence-item ng-scope" ng-repeat="item in interaction.items" value="2">
    <label eb-content-block="item.value">Antwoord 3</label>
  </li><!-- end ngRepeat: item in interaction.items -->
    <li class="eb-sequence-item ng-scope" ng-repeat="item in interaction.items" value="1" style="">
    <label eb-content-block="item.value">Antwoord 2</label>
  </li>
    <li class="eb-sequence-item ng-scope" ng-repeat="item in interaction.items" value="1" style="">
    <label eb-content-block="item.value">Antwoord 2</label>
  </li>
    <li class="eb-sequence-item ng-scope" ng-repeat="item in interaction.items" value="1" style="">
    <label eb-content-block="item.value">Antwoord 2</label>
  </li>
    <li class="eb-sequence-item ng-scope" ng-repeat="item in interaction.items" value="1" style="">
    <label eb-content-block="item.value">Antwoord 2</label>
  </li>
    <li class="eb-sequence-item ng-scope" ng-repeat="item in interaction.items" value="1" style="">
    <label eb-content-block="item.value">Antwoord 2</label>
  </li>
    <li class="eb-sequence-item ng-scope" ng-repeat="item in...

CSS

.eb-sequence-container label {
  display: block;
  border: 2px solid #5b88c2;
  border-radius: 25px;
  background-color: #81c5ff;
}
.eb-sequence-orientation-horizontal li {
  display: inline-table;
    vertical-align: middle;
}
.eb-sequence-placeholder{
  opacity: 0.5;
}

JavaScript

var clone;
$('.eb-sequence-container').sortable({
    start: function( event, ui ) {
        clone = $(ui.item[0].outerHTML).clone();
    },
    placeholder: {
        element: function(clone, ui) {
            return $('<li class="eb-sequence-item eb-sequence-placeholder">'+clone[0].innerHTML+'</li>');
        },
        update: function() {
            return;
        }
    }
});