JSFiddle - React, Tailwind, and code Playground

by Florian Ferbach

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-5">
            <ul id="teams" class="list-group">
                <li class="list-group-item poll-assets" data-id="1" data-name="Team 1">Team 1</li>
                <li class="list-group-item poll-assets" data-id="2" data-name="Team 2">Team 2</li>
                <li class="list-group-item poll-assets" data-id="3" data-name="Team 3">Team 3</li>
            </ul>
        </div>
        <div class="col-md-5">
            <ul id="poll" class="list-group">
                <li id="1" class="list-group-item poll-item" data-id="1" data-name="Team 1">Team 1</li>
                <li id="4" class="list-group-item poll-item" data-id="4" data-name="Team 4">Team 4</li>
                <li id="5" class="list-group-item poll-item" data-id="5" data-name="Team 5">Team 5</li>
            </ul>
        </div>
    </div>
</div>

JavaScript

$(function () {
    $("#teams").sortable({
        revert: true,
        connectWith: "#poll",
        start: function () {
            console.log('start');
            var order = $('#poll').sortable("toArray", {
                attribute: "data-id"
            });
            $('#poll').data('order', order);
        }
    }).disableSelection();


    $("#poll").sortable({
        revert: true,
        receive: function (event, ui) {
            console.log('receive');
            var order = $('#poll').data('order');
            var id = $(ui.item).data('id').toString();
            if ($.inArray(id, order) != -1) {
                console.log('CANCELLED');
                $(ui.sender).sortable("cancel");
            } else {
                console.log('NOT CANCELLED');
            }
        }
    }).disableSelection();
});