Sortable

by Valerie Ren

HTML

<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<h4>An input outside of the sortable boxes works:</h4>
<input type="text" placeholder="this input works"/>
<br/>

<h4>But if you try to add an input field inside one of the sortable boxes, you cannot click it in Firefox.</h4>
<h6>Note that the markup for the sortable boxes is copied directly from jquery.com as is the corresponding CSS and JS</h6>

<div class="sortable-lists">
    <ul id="sortable1" class="connectedSortable">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
        </ul>
       <textarea maxlength="4000" class="editTextArea">Please accept our invitation to participate in the Connect-CTY notification service. We know your personal information is important, and rest assured that we will not share it with anyone. If you have NOT already received a test phone call from us, or you would like to provide additional contact information, click the Connect-CTY image below to sign up.</textarea>
</div>

CSS

#sortable1, #sortable2 {
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 90%;
cursor:pointer;
display: inline;
}

JavaScript

$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
});
});