jQWidgets jqxSortable cursorAt属性

jQWidgets jqxSortable是一个jQuery插件，用于创建可排序列表和树。其中的cursorAt属性可以定义可拖拽元素相对于鼠标光标的位置，以实现更精细的拖拽体验。

1. cursorAt属性的使用方法

cursorAt属性是一个对象，包含两个数值型属性：left和top。它们分别定义了可拖拽元素相对于鼠标光标的水平和垂直方向上的偏移量。默认值是{ left: 5, top: 5 }。

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

$("#sortable").jqxSortable({
  cursorAt: { left: 20, top: 20 }
});

上面的代码将sortable列表中的元素拖拽时，把元素的左上角移动到距离鼠标光标20px的位置。

2. cursorAt属性的高级应用

通过结合其他jqxSortable的配置项和事件，可以实现更复杂的拖拽效果。以下示例演示了如何创建一个通过拖拽改变大小的元素。

<div id="resizeable">
  <div class="resize-handle"></div>
</div>

#resizeable {
  width: 200px;
  height: 200px;
  position: relative;
  background: #eee;
}

.resize-handle {
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: 0;
  right: 0;
  background: #333;
  cursor: nwse-resize;
}

$("#resizeable").jqxSortable({
  cursorAt: { left: -5, top: -5 },
  dragStart: function (event) {
    var target = event.target;
    if ($(target).hasClass("resize-handle")) {
      $(this).data("resizable", true);
    } else {
      $(this).data("resizable", false);
    }
  },
  dragMove: function (event) {
    var target = event.target;
    var resizable = $(this).data("resizable");
    if (resizable) {
      var x = event.pageX - $(target).offset().left;
      var y = event.pageY - $(target).offset().top;
      $(target).css({
        width: x,
        height: y
      });
      event.preventDefault();
    }
  }
});

上面的代码创建了一个resizeable元素，其中包含一个resize-handle元素作为拖拽触发器。当resize-handle被拖拽时，dragStart事件处理函数将设置一个数据属性来标记可拖拽元素是否是可缩放的。在dragMove事件中，如果可拖拽元素是可缩放的，它将根据拖拽距离改变自身的宽度和高度。注意，这里的cursorAt属性被设置为{ left: -5, top: -5 }，这是为了让resize-handle元素的右下角与鼠标光标的位置对准，以实现更精细的效果。

结语

cursorAt属性是jQWidgets jqxSortable插件中提供的一个实用功能，它帮助开发者更方便地定位和控制可拖拽元素的位置，从而实现更多样化的拖拽交互效果。