jQuery UI 可排序开始事件

简介

jQuery UI是一个基于 jQuery的JavaScript库，其中包含了许多UI组件和效果，如可排序（Sortable）、对话框（Dialog）、自动完成（Autocomplete）等等。可排序（Sortable）组件可以让元素重新排序，而它的“开始事件”能够在用户开始拖拽某个元素时被触发。

开始事件（start）

当用户开始拖拽某个元素时，开始事件（start）会被触发。开始事件（start）提供了一个hook函数以便在拖动开始之前，你可以执行一些操作。

以下是开始事件（start）的触发条件：

• 用户按住了可排序（Sortable）元素并开始拖拽。
• 鼠标光标移动了一定像素之后，拖拽行为便开始了。

开始事件（start）的语法如下所示：

$( ".selector" ).sortable({
  start: function( event, ui ) {}
});

开始事件（start）中的参数

开始事件（start）有两个参数：event和ui。其中，event是jQuery事件对象，而ui参数包含了拖拽的原始原始对象，如draggable、 helper和position等。

在开始事件（start）中，我们可以通过ui参数访问到以下属性：

• ui.item: 被拖动的元素。
• ui.placeholder: 对应元素拖动到新的位置时代表位置的占位符。
• ui.offset: 拖动元素与鼠标光标之间的距离。
• ui.position: 拖动元素的left和top位置。

开始事件（start）的实践

以下是一个触发排序开始事件（start）时，改变元素背景色的实际例子：

$( ".sortable" ).sortable({
  start: function( event, ui ) {
    ui.item.css('background-color', 'yellow');
  }
});

如上所示，我们使用css方法在开始事件（start）中改变拖动元素的背景颜色为黄色。

总结

通过开始事件（start），我们可以在用户开始拖动某个元素前执行一些操作。具体来说，我们可以改变元素的背景、内容或其他一些样式，从而让用户更好地感知排序操作。