10
Current Problem
In relearning jQuery/jQueryUI, I'm trying to call an event on an element after sorting it. This is probably relatively simple to do since jQuery has many ways to implement callbacks.
jQuery(document).ready(function($) {
$('ul').addClass('list-unstyled');
$('.sortable').sortable({
revert: true,
connectWith: ".sortable"
});
});ul {
margin: .8rem 2rem !important;
}
li {
margin: 0;
padding: 0;
}
div>div {
border: 1px solid #999;
margin-bottom: 2px;
}
body {
padding: 1rem;
}
.sortable {
cursor: pointer;
}
.sortable>div:hover {
background: #f0f0f0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" integrity="sha256-Bxxp5LTCU2v12w2d0kxKb0vt5F4EgtrzcJKJSR3Xxio=" crossorigin="anonymous"></script>
<div class="sortable">
<div>
<ul class="1">
<li>test 1</li>
<li>test 2</li>
</ul>
</div>
<div>
<ul class="2">
<li>test 3</li>
<li>test 4</li>
</ul>
</div>
</div>
<div class="sortable">
<div>
<ul class="3">
<li>test 7</li>
<li>test 8</li>
</ul>
</div>
<div>
1 Answer
1
The documentation for the events can be found here: http://jqueryui.com/demos/sortable/
I'm guessing you would want to use the sort or the change event.