jquery-draggable 总结 拖动 有大用 有大大用

约束拖动范围

通过定义 draggable 区域的边界来约束每个 draggable 的运动。

• 设置 axis 选项来限制 draggable 的路径为 x 轴或者 y 轴

$( "#draggable" ).draggable({ axis: "y" });
$( "#draggable1" ).draggable({ axis: "x" });

• 使用 containment 选项来指定一个父级的 DOM 元素或者一个 jQuery 选择器

$( "#draggable2" ).draggable({ containment: "#containment-wrapper", scroll: false });
$( "#draggable3" ).draggable({ containment: "parent" });

自动滚动

当 draggable 移动到视区外时自动滚动文档。设置 scroll 选项为 true 来启用自动滚动，当滚动触发时进行微调，滚动速度是通过 scrollSensitivity 和 scrollSpeed 选项设置的。

$( "#draggable" ).draggable({ scroll: true });
$( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 });
$( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 });

光标定位

当拖拽对象时定位光标。默认情况下，光标是出现在被拖拽对象的中间。使用 cursorAt 选项来指定相对于 draggable 的另一个位置（指定一个相对于 top、right、bottom、left 的像素值）。

$( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
$( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } });

光标样式

通过提供一个带有有效的 CSS 光标值的 cursor 选项，来自定义光标的外观。有效的 CSS 光标值包括：default、move、pointer、crosshair，等等。

$( "#draggable" ).draggable({ cursor: "move" });
$( "#draggable2" ).draggable({ cursor: "crosshair" });

延迟开始

通过 delay 选项设置延迟开始拖拽的毫秒数。

$( "#draggable2" ).draggable({ delay: 1000 });

允许拖拽

通过 distance 选项设置光标被按下且拖拽指定像素后才允许拖拽。

$( "#draggable" ).draggable({ distance: 20 });

事件

• start：拖拽开始时触发

• drag：拖拽期间触发

• stop：拖拽停止时触发

Handles-指定元素（或元素组）触发拖拽

只有当光标在 draggable 上指定部分时才允许拖拽。使用 handle 选项来指定用于拖拽对象的元素（或元素组）的 jQuery 选择器。

 $( "#draggable" ).draggable({ handle: "p" });

cancel-指定元素（或元素组）上时不允许拖拽

当光标在 draggable 内指定元素（或元素组）上时不允许拖拽。

$( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" });

还原位置

当带有布尔值 revert 选项的 draggable 停止拖拽时，返回 draggable（或它的助手）到原始位置。

$( "#draggable" ).draggable({ revert: true });
$( "#draggable2" ).draggable({ revert: true, helper: "clone" });

视觉反馈

给用户提供反馈，就像以助手方式拖拽对象一样。helper 选项接受值 ‘original’（用光标移动 draggable 对象），‘clone’（用光标移动 draggable 的副本），或者一个返回 DOM 元素的函数（该元素在拖拽期间显示在光标附近）。通过 opacity 选项控制助手的透明度。

为了区别哪一个 draggable 正在被拖拽，让在运动中的 draggable 保持最前。如果正在拖拽，使用 zIndex 选项来设置助手的高度 z-index，或者使用 stack 选项来确保当停止拖拽时，最后一个被拖拽的项目总是出现在同组其他项目的上面。

$( "#draggable3" ).draggable({
  cursor: "move",
  cursorAt: { top: -12, left: -20 },
  helper: function( event ) {
    return $( "<div class='ui-widget-header'>I'm a custom helper</div>" );
  }
});

disabled

禁用draggable

$( ".selector" ).draggable({ disabled: true });
$( ".selector" ).draggable('disabled');

enable

启用

$( ".selector" ).draggable({ enable: true });
$( ".selector" ).draggable('enable');

其他选项、方法、事件等参照 jquery-ui-draggable-api

来自  https://blog.csdn.net/weixin_42979149/article/details/83089613