夜光带你走进Jquery UI（五）擅长的领域

最新推荐文章于 2021-06-16 00:51:45 发布
最新推荐文章于 2021-06-16 00:51:45 发布
阅读量115 收藏
点赞数
分类专栏： Genius-Jquery UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41987706/article/details/102715256
版权

夜光序言：

 

 知世故而不世故，才是最善良的成熟。

愿你趟过世俗浑水，仍能不沾染那一身的世故。

 

 

 

 

 

 

 

 

正文：jQuery UI API - 可拖拽小部件（Draggable Widget）

 

选项类型描述默认值
addClassesBoolean如果设置为 false，将阻止 ui-draggable class 被添加。当在数百个元素上调用 .draggable() 时，这么设置有利于性能优化。

代码实例：

初始化带有指定 addClasses 选项的 draggable：

$( ".selector" ).draggable({ addClasses: false });
    

在初始化后，获取或设置 addClasses 选项：

// getter
var addClasses = $( ".selector" ).draggable( "option", "addClasses" );
 
// setter
$( ".selector" ).draggable( "option", "addClasses", false );
    
true
appendTojQuery 或 Element 或 Selector 或 String当拖拽时，draggable 助手（helper）要追加到哪一个元素。

支持多个类型：

  • jQuery：一个 jQuery 对象，包含助手（helper）要追加到的元素。
  • Element：要追加助手（helper）的元素。
  • Selector：一个选择器，指定哪一个元素要追加助手（helper）。
  • String：字符串 "parent" 将促使助手（helper）成为 draggable 的同级。

代码实例：

初始化带有指定 appendTo 选项的 draggable：

$( ".selector" ).draggable({ appendTo: "body" });
    

在初始化后，获取或设置 appendTo 选项：

// getter
var appendTo = $( ".selector" ).draggable( "option", "appendTo" );
 
// setter
$( ".selector" ).draggable( "option", "appendTo", "body" );
    
"parent"
axisString约束在水平轴 (x) 或垂直轴 (y) 上拖拽。可能的值："x", "y"。

代码实例：

初始化带有指定 axis 选项的 draggable：

$( ".selector" ).draggable({ axis: "x" });
    

在初始化后，获取或设置 axis 选项：

// getter
var axis = $( ".selector" ).draggable( "option", "axis" );
 
// setter
$( ".selector" ).draggable( "option", "axis", "x" );
    
false
cancelSelector防止从指定的元素上开始拖拽。

代码实例：

初始化带有指定 cancel 选项的 draggable：

$( ".selector" ).draggable({ cancel: ".title" });
    

在初始化后，获取或设置 cancel 选项：

// getter
var cancel = $( ".selector" ).draggable( "option", "cancel" );
 
// setter
$( ".selector" ).draggable( "option", "cancel", ".title" );
    
"input, textarea, button, select, option"
connectToSortableSelector允许 draggable 放置在指定的 sortable 上。如果使用了该选项，一个 draggable 可被放置在一个 sortable 列表上，然后成为列表的一部分。注意：helper 选项必须设置为 "clone"，以便更好地工作。

代码实例：

初始化带有指定 connectToSortable 选项的 draggable：

$( ".selector" ).draggable({ connectToSortable: "#my-sortable" });
    

在初始化后，获取或设置 connectToSortable 选项：

// getter
var connectToSortable = $( ".selector" ).draggable( "option", "connectToSortable" );
 
// setter
$( ".selector" ).draggable( "option", "connectToSortable", "#my-sortable" );
    
false
containmentSelector 或 Element 或 String 或 Array约束在指定元素或区域的边界内拖拽。

支持多个类型：

  • Selector：可拖拽元素将被包含在 selector 第一个元素的边界内。如果未找到元素，则不设置 containment。
  • Element：可拖拽元素将被包含在元素的边界。
  • String：可能的值："parent"、"document"、"window"。
  • Array：一个数组， 以形式 [ x1, y1, x2, y2 ] 定义元素的边界。

代码实例：

初始化带有指定 containment 选项的 draggable：

$( ".selector" ).draggable({ containment: "parent" });
    

在初始化后，获取或设置 containment 选项：

// getter
var containment = $( ".selector" ).draggable( "option", "containment" );
 
// setter
$( ".selector" ).draggable( "option", "containment", "parent" );
    
false
cursorString拖拽操作期间的 CSS 光标。

代码实例：

初始化带有指定 cursor 选项的 draggable：

$( ".selector" ).draggable({ cursor: "crosshair" });
    

在初始化后，获取或设置 cursor 选项：

// getter
var cursor = $( ".selector" ).draggable( "option", "cursor" );
 
// setter
$( ".selector" ).draggable( "option", "cursor", "crosshair" );
    
"auto"
cursorAtObject设置拖拽助手（helper）相对于鼠标光标的偏移。坐标可通过一个或两个键的组合成一个哈希给出：{ top, left, right, bottom }。

代码实例：

初始化带有指定 cursorAt 选项的 draggable：

$( ".selector" ).draggable({ cursorAt: { left: 5 } });
    

在初始化后，获取或设置 cursorAt 选项：

// getter
var cursorAt = $( ".selector" ).draggable( "option", "cursorAt" );
 
// setter
$( ".selector" ).draggable( "option", "cursorAt", { left: 5 } );
    
false
delayNumber鼠标按下后直到拖拽开始为止的时间，以毫秒计。该选项可以防止点击在某个元素上时不必要的拖拽。

代码实例：

初始化带有指定 delay 选项的 draggable：

$( ".selector" ).draggable({ delay: 300 });
    

在初始化后，获取或设置 delay 选项：

// getter
var delay = $( ".selector" ).draggable( "option", "delay" );
 
// setter
$( ".selector" ).draggable( "option", "delay", 300 );
    
0
disabledBoolean如果设置为 true，则禁用该 draggable。

代码实例：

初始化带有指定 disabled 选项的 draggable：

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

在初始化后，获取或设置 disabled 选项：

// getter
var disabled = $( ".selector" ).draggable( "option", "disabled" );
 
// setter
$( ".selector" ).draggable( "option", "disabled", true );
    
false
distanceNumber鼠标按下后拖拽开始前必须移动的距离，以像素计。该选项可以防止点击在某个元素上时不必要的拖拽。

代码实例：

初始化带有指定 distance 选项的 draggable：

$( ".selector" ).draggable({ distance: 10 });
    

在初始化后，获取或设置 distance 选项：

// getter
var distance = $( ".selector" ).draggable( "option", "distance" );
 
// setter
$( ".selector" ).draggable( "option", "distance", 10 );
    
1
gridArray对齐拖拽助手（helper）到网格，每个 x 和 y 像素。数组形式必须是 [ x, y ]。

代码实例：

初始化带有指定 grid 选项的 draggable：

$( ".selector" ).draggable({ grid: [ 50, 20 ] });
    

在初始化后，获取或设置 grid 选项：

// getter
var grid = $( ".selector" ).draggable( "option", "grid" );
 
// setter
$( ".selector" ).draggable( "option", "grid", [ 50, 20 ] );
    
false
handleSelector 或 Element如果指定了该选项，则限制开始拖拽，除非鼠标在指定的元素上按下。只有可拖拽（draggable）元素的后代元素才允许被拖拽。

代码实例：

初始化带有指定 handle 选项的 draggable：

$( ".selector" ).draggable({ handle: "h2" });
    

在初始化后，获取或设置 handle 选项：

// getter
var handle = $( ".selector" ).draggable( "option", "handle" );
 
// setter
$( ".selector" ).draggable( "option", "handle", "h2" );
    
false
helperString 或 Function()允许一个 helper 元素用于拖拽显示。

支持多个类型：

  • String：如果设置为 "clone"，元素将被克隆，且克隆将被拖拽。
  • Function：一个函数，将返回拖拽时要使用的 DOMElement。

代码实例：

初始化带有指定 helper 选项的 draggable：

$( ".selector" ).draggable({ helper: "clone" });
    

在初始化后，获取或设置 helper 选项：

// getter
var helper = $( ".selector" ).draggable( "option", "helper" );
 
// setter
$( ".selector" ).draggable( "option", "helper", "clone" );
    
"original"
iframeFixBoolean 或 Selector防止拖拽期间 iframes 捕捉鼠标移动（mousemove ）事件。在与 cursorAt 选项结合使用时，或鼠标光标未覆盖在助手（helper）上时，非常有用。

支持多个类型：

  • Boolean：当设置为 true 时，透明遮罩将被放置在页面上所有 iframes 上。
  • Selector：匹配 selector 的任意 iframes 将被透明遮罩覆盖。

代码实例：

初始化带有指定 iframeFix 选项的 draggable：

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

在初始化后，获取或设置 iframeFix 选项：

// getter
var iframeFix = $( ".selector" ).draggable( "option", "iframeFix" );
 
// setter
$( ".selector" ).draggable( "option", "iframeFix", true );
    
false
opacityNumber当被拖拽时助手（helper）的不透明度。

代码实例：

初始化带有指定 opacity 选项的 draggable：

$( ".selector" ).draggable({ opacity: 0.35 });
    

在初始化后，获取或设置 opacity 选项：

// getter
var opacity = $( ".selector" ).draggable( "option", "opacity" );
 
// setter
$( ".selector" ).draggable( "option", "opacity", 0.35 );
    
false
refreshPositionsBoolean如果设置为 true，在每次鼠标移动（mousemove）时都会计算所有可放置的位置。注意：这解决了高度动态的问题，但是明显降低了性能。

代码实例：

初始化带有指定 refreshPositions 选项的 draggable：

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

在初始化后，获取或设置 refreshPositions 选项：

// getter
var refreshPositions = $( ".selector" ).draggable( "option", "refreshPositions" );
 
// setter
$( ".selector" ).draggable( "option", "refreshPositions", true );
    
false
revertBoolean 或 String 或 Function()当拖拽停止时，元素是否还原到它的开始位置。

支持多个类型：

  • Boolean：如果设置为 true，元素总会还原。
  • String：如果设置为 "invalid"，还原仅在 draggable 未放置在 droppable 上时发生，如果设置为 "valid" 则相反。
  • Function：一个函数，确定元素是否还原到它的开始位置。该函数必须返回 true 才能还原元素。

代码实例：

初始化带有指定 revert 选项的 draggable：

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

在初始化后，获取或设置 revert 选项：

// getter
var revert = $( ".selector" ).draggable( "option", "revert" );
 
// setter
$( ".selector" ).draggable( "option", "revert", true );
    
false
revertDurationNumber还原（revert）动画的持续时间，以毫秒计。如果 revert 选项是 false 则忽略。

代码实例：

初始化带有指定 revertDuration 选项的 draggable：

$( ".selector" ).draggable({ revertDuration: 200 });
    

在初始化后，获取或设置 revertDuration 选项：

// getter
var revertDuration = $( ".selector" ).draggable( "option", "revertDuration" );
 
// setter
$( ".selector" ).draggable( "option", "revertDuration", 200 );
    
500
scopeString用于组合配套 draggable 和 droppable 项，除了 droppable 的 accept 选项之外。一个与 droppable 带有相同的 scope 值的 draggable 会被该 droppable 接受。

代码实例：

初始化带有指定 scope 选项的 draggable：

$( ".selector" ).draggable({ scope: "tasks" });
    

在初始化后，获取或设置 scope 选项：

// getter
var scope = $( ".selector" ).draggable( "option", "scope" );
 
// setter
$( ".selector" ).draggable( "option", "scope", "tasks" );
    
"default"
scrollBoolean如果设置为 true，当拖拽时容器会自动滚动。

代码实例：

初始化带有指定 scroll 选项的 draggable：

$( ".selector" ).draggable({ scroll: false });
    

在初始化后，获取或设置 scroll 选项：

// getter
var scroll = $( ".selector" ).draggable( "option", "scroll" );
 
// setter
$( ".selector" ).draggable( "option", "scroll", false );
    
true
scrollSensitivityNumber从要滚动的视区边缘起的距离，以像素计。距离是相对于指针的，不是相对于 draggable。如果 scroll 选项是 false 则忽略。

代码实例：

初始化带有指定 scrollSensitivity 选项的 draggable：

$( ".selector" ).draggable({ scrollSensitivity: 100 });
    

在初始化后，获取或设置 scrollSensitivity 选项：

// getter
var scrollSensitivity = $( ".selector" ).draggable( "option", "scrollSensitivity" );
 
// setter
$( ".selector" ).draggable( "option", "scrollSensitivity", 100 );
    
20
scrollSpeedNumber当鼠标指针获取到在 scrollSensitivity 距离内时，窗体滚动的速度。如果 scroll 选项是 false 则忽略。

代码实例：

初始化带有指定 scrollSpeed 选项的 draggable：

$( ".selector" ).draggable({ scrollSpeed: 100 });
    

在初始化后，获取或设置 scrollSpeed 选项：

// getter
var scrollSpeed = $( ".selector" ).draggable( "option", "scrollSpeed" );
 
// setter
$( ".selector" ).draggable( "option", "scrollSpeed", 100 );
    
20
snapBoolean 或 Selector元素是否对齐到其他元素。

支持多个类型：

  • Boolean：当设置为 true 时，元素会对齐到其它可拖拽（draggable ）元素。
  • Selector：一个选择器，指定要对齐到哪个元素。

代码实例：

初始化带有指定 snap 选项的 draggable：

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

在初始化后，获取或设置 snap 选项：

// getter
var snap = $( ".selector" ).draggable( "option", "snap" );
 
// setter
$( ".selector" ).draggable( "option", "snap", true );
    
false
snapModeString决定 draggable 将对齐到对齐元素的哪个边缘。如果 snap 选项是 false 则忽略。可能的值："inner"、"outer"、"both"。

代码实例：

初始化带有指定 snapMode 选项的 draggable：

$( ".selector" ).draggable({ snapMode: "inner" });
    

在初始化后，获取或设置 snapMode 选项：

// getter
var snapMode = $( ".selector" ).draggable( "option", "snapMode" );
 
// setter
$( ".selector" ).draggable( "option", "snapMode", "inner" );
    
"both"
snapToleranceNumber从要发生对齐的对齐元素边缘起的距离，以像素计。如果 snap 选项是 false 则忽略。

代码实例：

初始化带有指定 snapTolerance 选项的 draggable：

$( ".selector" ).draggable({ snapTolerance: 30 });
    

在初始化后，获取或设置 snapTolerance 选项：

// getter
var snapTolerance = $( ".selector" ).draggable( "option", "snapTolerance" );
 
// setter
$( ".selector" ).draggable( "option", "snapTolerance", 30 );
    
20
stackSelector控制匹配选择器（selector）的元素集合的 z-index，总是在当前拖拽项的前面，在类似窗口管理器这样的事物中非常有用。

代码实例：

初始化带有指定 stack 选项的 draggable：

$( ".selector" ).draggable({ stack: ".products" });
    

在初始化后，获取或设置 stack 选项：

// getter
var stack = $( ".selector" ).draggable( "option", "stack" );
 
// setter
$( ".selector" ).draggable( "option", "stack", ".products" );
    
false
zIndexNumber当被拖拽时，助手（helper）的 Z-index。

代码实例：

初始化带有指定 zIndex 选项的 draggable：

$( ".selector" ).draggable({ zIndex: 100 });
    

在初始化后，获取或设置 zIndex 选项：

// getter
var zIndex = $( ".selector" ).draggable( "option", "zIndex" );
 
// setter
$( ".selector" ).draggable( "option", "zIndex", 100 );
    
false

 

方法返回描述
destroy()jQuery (plugin only)完全移除 draggable 功能。这会把元素返回到它的预初始化状态。
  • 该方法不接受任何参数。

代码实例：

调用 destroy 方法：

$( ".selector" ).draggable( "destroy" );
    
disable()jQuery (plugin only)禁用 draggable。
  • 该方法不接受任何参数。

代码实例：

调用 disable 方法：

$( ".selector" ).draggable( "disable" );
    
enable()jQuery (plugin only)启用 draggable。
  • 该方法不接受任何参数。

代码实例：

调用 enable 方法：

$( ".selector" ).draggable( "enable" );
    
option( optionName )Object获取当前与指定的 optionName 关联的值。
  • optionName
    类型：String
    描述：要获取的选项的名称。

代码实例：

调用该方法：

var isDisabled = $( ".selector" ).draggable( "option", "disabled" );
    
option()PlainObject获取一个包含键/值对的对象，键/值对表示当前 draggable 选项哈希。
  • 该方法不接受任何参数。

代码实例：

调用该方法：

var options = $( ".selector" ).draggable( "option" );
    
option( optionName, value )jQuery (plugin only)设置与指定的 optionName 关联的 draggable 选项的值。
  • optionName
    类型：String
    描述：要设置的选项的名称。
  • value
    类型：Object
    描述：要为选项设置的值。

代码实例：

调用该方法：

$( ".selector" ).draggable( "option", "disabled", true );
    
option( options )jQuery (plugin only)为 draggable 设置一个或多个选项。
  • options
    类型：Object
    描述：要设置的 option-value 对。

代码实例：

调用该方法：

$( ".selector" ).draggable( "option", { disabled: true } );
    
widget()jQuery返回一个包含 draggable 元素的 jQuery 对象。
  • 该方法不接受任何参数。

代码实例：

调用 widget 方法：

var widget = $( ".selector" ).draggable( "widget" );
    

 

事件类型描述
create( event, ui )dragcreate当 draggable 被创建时触发。
  • event
    类型：Event
  • ui
    类型：Object

注意：ui 对象是空的，这里包含它是为了与其他事件保持一致性。

代码实例：

初始化带有指定 create 回调的 draggable：

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

绑定一个事件监听器到 dragcreate 事件：

$( ".selector" ).on( "dragcreate", function( event, ui ) {} );
    
drag( event, ui )drag在拖拽期间当鼠标移动时触发。
  • event
    类型：Event
  • ui
    类型：Object
    • helper
      类型：jQuery
      描述：jQuery 对象，表示被拖拽的助手（helper）。
    • position
      类型：Object
      描述：助手（helper）的当前 CSS 位置，比如 { top, left } 对象。
    • offset
      类型：Object
      描述：助手（helper）的当前偏移位置，比如 { top, left } 对象。

代码实例：

初始化带有指定 drag 回调的 draggable：

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

绑定一个事件监听器到 drag 事件：

$( ".selector" ).on( "drag", function( event, ui ) {} );
    
start( event, ui )dragstart当拖拽开始时触发。
  • event
    类型：Event
  • ui
    类型：Object
    • helper
      类型：jQuery
      描述：jQuery 对象，表示被拖拽的助手（helper）。
    • position
      类型：Object
      描述：助手（helper）的当前 CSS 位置，比如 { top, left } 对象。
    • offset
      类型：Object
      描述：助手（helper）的当前偏移位置，比如 { top, left } 对象。

代码实例：

初始化带有指定 start 回调的 draggable：

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

绑定一个事件监听器到 dragstart 事件：

$( ".selector" ).on( "dragstart", function( event, ui ) {} );
    
stop( event, ui )dragstop当拖拽停止时触发。
  • event
    类型：Event
  • ui
    类型：Object
    • helper
      类型：jQuery
      描述：jQuery 对象，表示被拖拽的助手（helper）。
    • position
      类型：Object
      描述：助手（helper）的当前 CSS 位置，比如 { top, left } 对象。
    • offset
      类型：Object
      描述：助手（helper）的当前偏移位置，比如 { top, left } 对象。

代码实例：

初始化带有指定 stop 回调的 draggable：

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

绑定一个事件监听器到 dragstop 事件：

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

 

 


<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>夜光：可拖拽小部件（Draggable Widget）演示</title>

    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">

    <style>

        #draggable {

            width: 100px;

            height: 100px;

            background: #ccc;

        }

    </style>

    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

</head>

<body>



<div id="draggable">请拖拽我~~</div>



<script>

    $( "#draggable" ).draggable();

</script>



</body>

</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

GeniusTeam-夜光
关注
专栏目录
夜光带你走进 微信小程序开发（五）擅长的领域
01-03
夜光序言：   不管与你的路有多苦擦干眼泪告诉自己不能哭不怕谁说我是个错误只要你我不放弃永不认输。   正文：  以道御术 / 以术识道 有些东西，如果我们自定义的话，就会和其他小程序风格不一致了~ ...
夜光数据.pptx
09-18
DMSP/OLS夜光数据，SNPP/VIIRS夜光数据及其应用领域，包括两个数据的下载地址，卫星及传感器基本参数，时间序列产品基本介绍（空间和时间分辨率，覆盖范围，投影坐标，子产品介绍，如DMSP的平均灯光强度、稳定灯光...
jQuery UI API - 可拖拽小部件（Draggable Widget）(转)
weixin_33701251的博客
11-06 101
所属类别 交互（Interactions） 用法 描述：允许使用鼠标移动元素。 版本新增：1.0 依赖： UI 核心（UI Core） 部件库（Widget Factory） 鼠标交互（Mouse Interaction）   注释：让被选元素可被鼠标拖拽。如果您不只是拖拽，而是拖拽 &amp; 放置，请查看 jQuery UI 可放置（Droppable）插件，为...
Draggable Widget
weixin_30293079的博客
03-17 81
Draggable Widget Categories: Interactions Draggable Widgetversion added: 1.0 Description: Allow elements to be moved using the mouse. QuickNavExamples Options addClasses append...
JQueryUI-sorTable
小代码大作家
10-23 380
JQueryUI-sorTable 使用鼠标调整列表中或者网格中元素的排序。 如需了解更多有关 sortable 交互的细节，请查看 API 文档 可排序小部件Sortable Widget。 1.默认功能 在任意的 DOM 元素上启用 sortable 功能。通过鼠标点击并拖拽元素到列表中的一个新的位置，其它条目会自动调整。默认情况下，sortable 各个条目共享 draggable 属性。 ...
jquery ui放大缩小_jQuery UI 实例
weixin_33193480的博客
12-29 555
jQuery UI 实例 - 缩放(Resizable)使用鼠标改变元素的尺寸。如需了解更多有关 resizable 交互的细节，请查看 API 文档 可调整尺寸小部件(Resizable Widget)。默认功能在任意的 DOM 元素上启用 resizable 功能。通过鼠标拖拽右边或底边的边框到所需的宽度或高度。jQuery UI 缩放(Resizable) - 默认功能#resizable ...
JQuery UI - draggable
D!eR 个人博客
12-13 5388
·概述在任何DOM元素启用拖动功能。通过单击鼠标并拖动对象在窗口内的任何地方移动。官方示例地址：http://jqueryui.com/demos/draggable/所有的事件回调函数都有两个参数：event和ui，浏览器自有event对象，和经过封装的ui对象ui.helper - 表示被拖拽的元素的JQuery对象ui.position - 表示相对当前对象，鼠标的坐
行业资料-交通装置-一种带夜光和刹车警示功能的电动车.zip
08-24
行业资料-交通装置-一种带夜光和刹车警示功能的电动车.zip
行业资料-建筑装置-带镜子及钟表的夜光笔.zip
08-18
总的来说，"带镜子及钟表的夜光笔"是一个将实用性和创新性相结合的建筑装置，它的出现反映了建筑设计领域对工具功能多样化和用户体验提升的追求。这样的产品不仅提升了工作效率，也增强了使用者的工作体验，是现代...
行业资料-交通装置-一种带照明系统的夜光自行车.zip
08-18
行业资料-交通装置-一种带照明系统的夜光自行车.zip
JQuery-UI 方法属性
qq_35568294的博客
03-08 324
添加class .addClass(“ClassName”,1000,“easeOutBounce”,function(){}) 值的顺序：class名称，动画时间，动画效果，回调函数 百叶窗 $(".toggle").toggle(“blind”,{direction:left},1000,function(){}) direction方向 (down,left,right,up) 默认：up ...
jquery ui 文档使用总结
lzz360的专栏
08-27 1262
jquery ui 总结
JQuery UI - draggable参数中文详细说明
热门推荐
liu_111111的专栏
05-09 3万+
·概述    在任何DOM元素启用拖动功能。通过单击鼠标并拖动对象在窗口内的任何地方移动。    官方示例地址：http://jqueryui.com/demos/draggable/      所有的事件回调函数都有两个参数：event和ui，浏览器自有event对象，和经过封装的ui对象    ui.helper - 表示被拖拽的元素的JQuery对象    ui.position
Jquery UI常用插件
只有变秃 才能变强
03-11 1674
Jquery UI常用插件拖曳插件——draggable拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下 ： $(selector). draggable({options})options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment
jQuery UI 实例 - 排序（Sortable）
u010987379的专栏
01-06 1187
jQuery UI 实例 - 排序（Sortable） 使用鼠标调整列表中或者网格中元素的排序。 如需了解更多有关 sortable 交互的细节，请查看 API 文档 可排序小部件（Sortable Widget）。 默认功能 在任意的 DOM 元素上启用 sortable 功能。通过鼠标点击并拖拽元素到列表中的一个新的位置，其它条目会自动调整。默认情况下，sort
html拖拽 UI,jQuery UI API – 可拖拽小部件（Draggable Widget） | 菜鸟教程
weixin_33820059的博客
06-16 337
jQuery UI API - 可拖拽小部件(Draggable Widget)所属类别用法描述：允许使用鼠标移动元素。版本新增：1.0依赖：注释：让被选元素可被鼠标拖拽。如果您不只是拖拽，而是拖拽 & 放置，请查看 jQuery UI 可放置(Droppable)插件，为可拖拽元素提供了一个放置目标。快速导航选项类型描述默认值addClassesBoolean如果设置为 false，将阻...
jquery sortable 中文解释
diechufeng3288的博客
12-28 183
jquery sortable 中文解释 转载： ·概述 Selectable插件允许用户对指定的元素进行选中的动作。此外还支持按住Ctrl键单击或拖拽选择多个元素。 官方示例地址：http://jqueryui.com/demos/sorta...
DMSP/OLS与SNPP/VIIRS夜光数据解析及应用
本资料主要涵盖了DMSP/OLS和SNPP/VIIRS两种夜光数据及其应用领域。DMSP/OLS数据来源于美国的国防气象卫星计划，而SNPP/VIIRS数据则由新一代卫星提供。两者都提供了丰富的夜光信息，但有各自的特性和适用范围。 DMSP...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值