在JQuery中排序后的调用事件 [英] Call event after sorting in JQuery
本文介绍了在JQuery中排序后的调用事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在学习jQuery/jQueryUI时,我试图在对元素进行排序后调用该事件.由于jQuery有许多实现回调的方法,所以这可能相对简单.
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>
<ul class="4">
<li>test 9</li>
<li>test 0</li>
</ul>
</div>
</div>
因此,假设我移动了3/4列表.我想在元素移动完成后发出回调(以更改背景或字体大小).
So let's say I move the 3/4 list. I want to issue a callback (to change the background or the font size) after the element is finished moving.
- 20101019-1145EST:我想我需要更加清楚.我正在尝试在已排序的特定元素上调用事件.我想我也许可以使用
sort
/change
函数,但是不应该有条件吗?这不仅涉及添加类,我计划附加的最终函数将执行一些AJAX以及一些计算.
- 20101019-1145EST: I think I need to be more clear. I'm trying to call the event on a particular element that is sorted. I guess I might be able to use the
sort
/change
function, but shouldn't there be a conditional involved? This involves more than adding a class, the eventual function I plan to attach will perform some AJAX as well as some calculations.
推荐答案
使用sortable
插件的stop
事件.
排序时触发此事件 已停止.
This event is triggered when sorting has stopped.
在您的示例中
$('.sortable')
.sortable({
revert : true,
connectWith : ".sortable",
stop : function(event,ui){ /* do whatever here */ }
});
这篇关于在JQuery中排序后的调用事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文