代码之家 › 专栏 › 技术社区 › vol7ron

JQuery排序后调用事件

jquery-ui-sortable jquery-ui jquery

vol7ron · 技术社区 · 15 年前

当前问题

在重新学习jQuery/jQueryUI时,我试图在对元素进行排序后对其调用事件。这可能相对简单,因为jQuery有很多实现回调的方法。

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列表。我想在元素移动完成后发出回调(更改背景或字体大小)。

编辑(s)

我想我需要更清楚一点。我正在尝试对已排序的特定元素调用事件。我想我可以用 sort / change

4 回复 | 直到 9 年前

Gabriele Petrioli 12 年前

使用 stop sortable 插件。

已经停止。

$('.sortable')
    .sortable({
       revert       : true,
       connectWith  : ".sortable",
       stop         : function(event,ui){ /* do whatever here */ }
    });

Jeremy Elbourn 15 年前

jquery ui sortable插件的事件列表可以在下面找到: http://jqueryui.com/demos/sortable/#events

Ken Browning 15 年前

有关这些事件的文档可以在以下位置找到: http://jqueryui.com/demos/sortable/

sort 或者 change

Alex P 12 年前

$(function() {   
    $('#sortable').sortable( { 
        revert    : true,
        connectWith  : ".sortable",
        stop     : function(event,ui){ 
              //write ur function here
        }
    });
});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Nuñito Calzada · JQuery在spring boot和Thymelaf中从DB自动完成

2 年前

Connor · 使用jquery UI幻灯片制作周围动画

2 年前

provance · 如何获得最新版本的jquery ui?

2 年前

Akhilesh · 当数据目标中有分号或冒号时,带有展开的aria的Button元素不展开

3 年前

chris loughnane · 使用jQuery UI滑块移动和缩放svg元素时遇到问题?

8 年前

Tirkesh Turkesh · 如何在可拖放div中释放项目的精确位置元素上拖放

8 年前

ferralucho · Hightlight jquery datepicker标头选定的星期几

8 年前

Paili · 如何在jQuery自动完成中添加其他内容?

8 年前

monu · 动态嵌套选项卡创建

8 年前