当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery UI Draggable drag( event, ui )用法及代码示例


用法:

drag( event, ui )

类型：drag

在拖动期间移动鼠标时触发，即在当前移动发生之前。
  • event
    类型：Event
  • ui
    类型：Object
    • helper
      类型：jQuery
      表示正在拖动的助手的 jQuery 对象。
    • position
      类型：Object
      助手的当前 CSS 位置为 { top, left } 对象。可以更改这些值以修改元素的放置位置。这对于自定义包含、捕捉等很有用。
    • offset
      类型：Object
      助手的当前偏移位置为{ top, left } 对象。

代码示例：

使用指定的拖动回调初始化可拖动对象：

$( ".selector" ).draggable({
  drag: function( event, ui ) {}
});

将事件侦听器绑定到拖动事件：

$( ".selector" ).on( "drag", function( event, ui ) {} );

通过 ui.position 约束移动：

$( ".selector" ).draggable({
  drag: function( event, ui ) {
 
    // Keep the left edge of the element
    // at least 100 pixels from the container
    ui.position.left = Math.min( 100, ui.position.left );
  }
});

相关用法


注：本文由纯净天空筛选整理自jqueryui.com大神的英文原创作品 Draggable drag( event, ui )。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。