Jquery Sortable Test

To be used for the Form Builder App

by Jayson Buquia

HTML

<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div class="sortable source">
    <li class="orig">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, veritatis? Fugiat dolores cupiditate id, similique debitis illo reprehenderit corrupti! Asperiores laboriosam magni corporis quam quod, ad, doloremque consequatur reprehenderit itaque.</li>
    <li class="orig">Asperiores vitae, consequatur cupiditate ut magnam quisquam praesentium aspernatur inventore necessitatibus dolores adipisci! Ipsum, officiis, ad. Provident, vitae mollitia numquam ducimus earum similique, cumque delectus quis! Maxime magnam, asperiores commodi.</li>
    <li class="orig">Sapiente minus, suscipit, a fugiat repellat, veritatis dolorem nisi ea perferendis aliquid asperiores? Maxime tenetur amet rem ipsum nam doloremque obcaecati quam cupiditate, at labore iusto odio, dolore vitae unde.</li>
</div>

<div class="sortable target">
    <li class="new">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, in atque ullam. Atque minus esse, in voluptates voluptas sint aspernatur. Tenetur nesciunt ad pariatur culpa deserunt itaque provident obcaecati delectus?</li>
    <li class="new">Consequuntur minima aut illo magni consectetur omnis quisquam. Sunt non neque cumque dolorum dolore! Quasi perferendis eum dicta obcaecati ab id ipsa veritatis reprehenderit. Fuga culpa minus aliquid tempore, nobis.</li>
    <li class="new">Ipsa iste non hic quas, officiis error? Perferendis asperiores, earum assumenda, temporibus repellat labore aliquid, explicabo atque error praesentium, doloribus consequatur qui cupiditate maiores quae? Impedit distinctio obcaecati voluptates quos.</li>
</div>

SCSS

.source, .target {
    width: 50%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid silver;
    float: left;
}

.orig, .new {
    list-style: none;
    padding: 10px;
    margin-bottom: 10px;
}

.orig {
    color: gray;
}

.new {
    color: blue;
}

JavaScript

$('.sortable').sortable({
	connectWith : '.sortable'
}).disableSelection();