jQWidgets jqxSortable over Event

首先，需要了解一下jQWidgets jqxSortable的基本概念。

jQWidgets jqxSortable是一个基于jQuery的可拖拽排序插件，支持对HTML元素进行拖拽排序操作和事件处理。其中over事件是在拖拽元素进入被拖拽元素的某个位置时触发的事件。接下来就为大家介绍一下jQWidgets jqxSortable over事件的攻略。

1. 安装jQWidgets jqxSortable插件

在使用jQWidgets jqxSortable之前，需要先安装相应的插件。可以通过npm安装，也可以从官网下载安装包手动安装。安装完成后，在需要使用的html文件中引入相应的js和css文件，即可使用jQWidgets jqxSortable插件。

2. 给元素绑定jQWidgets jqxSortable事件

在HTML中可以添加可以拖拽排序的元素，使用jQWidgets jqxSortable插件实现拖拽排序功能。给元素绑定jQWidgets jqxSortable的over事件，可以在元素拖拽进入另一个元素时执行一些自定义的操作。

示例1：

HTML代码：

<div id="sortable">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>

Javascript代码：

$('#sortable').jqxSortable({
  over: function(event) {
    console.log('Sortable item over event');
  }
});

在这个示例中，当拖拽元素进入ID为”sortable”的容器时，控制台将打印出 “Sortable item over event” 的信息。

3. 处理拖拽元素和被拖拽元素的事件

jQWidgets jqxSortable的over事件不仅可以检测元素被拖拽进入另一个元素的状态，还可以处理被拖拽元素和拖拽元素的HTML和CSS属性，实现更加自定义化的操作。

示例2：

HTML代码：

<div id="sortable">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>

Javascript代码：

$('#sortable').jqxSortable({
  over: function(event) {
    $(event.item).css('background-color', '#DDDDDD');
    $(event.target).addClass('sortable-target');
  },
  out: function(event) {
    $(event.item).css('background-color', '');
    $(event.target).removeClass('sortable-target');
  }
});

在这个示例中，当拖拽元素进入ID为”sortable”的容器时，其中的元素会改变背景颜色，同时目标容器会添加sortable-target的类名。当拖拽元素离开目标容器时，背景颜色和类名会复原。

以上就是jQWidgets jqxSortable over事件的攻略，通过灵活运用over事件，可以为网站添加更加自定义化的拖拽排序操作。