Sortable Circle on the end of a Div

index.html

<div id="content">
  
  <ul id="tasks">
    <li>
    <div class="outer-circle">
        <div class="inner-circle orange-bg">
            <span class="inside-content"></span>
        </div>
   Broken Iphone  <i class="material-icons right gray">rss_feed</i>
  </div>
    </li>
    <li>
    <div class="outer-circle">
        <div class="inner-circle mango-bg">
            <span class="inside-content"></span>
        </div>
   Hard Drive Ruined <i class="material-icons right gray">rss_feed</i> 
  </div>
    </li>
    <li>
    <div class="outer-circle blue-bg">
        <div class="inner-circle algae-bg">
            <span class="inside-content"></span>
        </div>
    No DVD <i class="material-icons right gray">rss_feed</i>
  </div>
    </li>
  </ul>
</div>

script.js

//https://github.com/RubaXa/Sortable

Sortable.create(tasks, {
  group: 'tasks',
  animation: 100,
   // Element dragging ended
    onEnd: function (/**Event*/evt) {
      alert(evt.newIndex);
        evt.oldIndex;  // element's old index within parent
        evt.newIndex;  // element's new index within parent
    },
});

scripts

<script src="//rubaxa.github.io/Sortable/Sortable.js"></script>

sortable-circle-on-the-end-of-a-div.markdown

Circle on the end of a Div

A Pen by Brian Redfern on CodePen.

License.

style.css

body {
	width: 100%
	margin:0px;
	text-align: center;
}
ul {
  list-style-type: none;
}

li {
  margin-bottom: 10px;
}
#content {
	width: 300px;
	margin-left: auto;
	margin-right: auto;
}
.outer-circle {
  position: relative;
	border: solid 0.5px #838283;
	border-radius: 2.5px;
  padding: 6px;
  text-align: left;
  padding-left: 20px;
}
.inner-circle {
  position: absolute;
	border-radius: 50%;
	height:16px;
	width:16px;
  left: -8px;
  top: 28%;
}

.orange-bg {
  background: #ff4c2b;
}

.blue-bg {
  background: #385a94;
}

.algae-bg {
  background: #1cc749;
}

.mango-bg {
  background: #ffbe2b;
}

.right{
  float: right;
}

.gray {
  color: #4a4a4a;
}

styles

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />