Примеры jQuery UI -Draggable
Позволяет перемещать элементы с помощью мыши.
Подробнее о взаимодействиях с перетаскиванием см. в документации API.Виджет Draggable。
Функциональность по умолчанию
Включите функциональность перетаскивания для любого элемента DOM. Перемещайте перетаскиваемый объект щелчком мыши и перетаскиванием в пределах области просмотра.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 默认功能</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>请拖动我！</p>
</div>
</body>
</html>
Автопрокрутка
Автоматически прокручивать документ, когда перетаскиваемый объект выходит за пределы области просмотра. Установитеscrollпараметр в true, чтобы включить автопрокрутку, настройте, когда срабатывает прокрутка, а скорость прокрутки задается черезscrollSensitivityиscrollSpeedпараметр.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 自动滚动</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ scroll: true });
$( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 });
$( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 });
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Scroll 设置为 true，默认设置</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>scrollSensitivity 设置为 100</p>
</div>
<div id="draggable3" class="ui-widget-content">
<p>scrollSpeed 设置为 100</p>
</div>
<div style="height: 5000px; width: 1px;"></div>
</body>
</html>
Ограничение перемещения
Ограничьте перемещение каждого перетаскиваемого элемента, определив границы области перетаскивания. Установитеaxisпараметр, чтобы ограничить путь перетаскиваемого элемента осью x или осью y, или используйтеcontainmentпараметр, чтобы указать родительский DOM-элемент или селектор jQuery, например 'document.'.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 约束运动</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
.draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
#draggable, #draggable2 { margin-bottom:20px; }
#draggable { cursor: n-resize; }
#draggable2 { cursor: e-resize; }
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }
h3 { clear: left; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ axis: "y" });
$( "#draggable2" ).draggable({ axis: "x" });
$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
$( "#draggable5" ).draggable({ containment: "parent" });
});
</script>
</head>
<body>
<h3>沿着轴约束运动：</h3>
<div id="draggable" class="draggable ui-widget-content">
<p>只能垂直拖拽</p>
</div>
<div id="draggable2" class="draggable ui-widget-content">
<p>只能水平拖拽</p>
</div>
<h3>或者在另一个 DOM 元素中约束运动：</h3>
<div id="containment-wrapper">
<div id="draggable3" class="draggable ui-widget-content">
<p>我被约束在盒子里</p>
</div>
<div class="draggable ui-widget-content">
<p id="draggable5" class="ui-widget-header">我被约束在父元素内</p>
</div>
</div>
</body>
</html>
Стиль курсора
Задайте положение курсора при перетаскивании объекта. По умолчанию курсор отображается в середине перетаскиваемого объекта. ИспользуйтеcursorAtпараметр, чтобы указать другое положение относительно перетаскиваемого элемента (укажите значения в пикселях относительно верхнего, правого, нижнего, левого края). Предоставивcursorпараметр с допустимым значением CSS cursor, настройте внешний вид курсора. Допустимые значения CSS cursor включают: default, move, pointer, crosshair и т. д.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 光标样式</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
$( "#draggable2" ).draggable({ cursor: "crosshair", cursorAt: { top: -5, left: -5 } });
$( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } });
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>我总是在中间（相对于鼠标）</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>我的光标是在 left -5 和 top -5</p>
</div>
<div id="draggable3" class="ui-widget-content">
<p>我的光标位置只控制了 'bottom' 值</p>
</div>
</body>
</html>
Задержка начала
Используйтеdelayпараметр, чтобы задать количество миллисекунд задержки перед началом перетаскивания. Используйтеdistanceпараметр, чтобы разрешить перетаскивание только после того, как курсор нажат и перетащен на указанное количество пикселей.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 延迟开始</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#draggable, #draggable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ distance: 20 });
$( "#draggable2" ).draggable({ delay: 1000 });
$( ".ui-draggable" ).disableSelection();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>只有把我拖拽了 20 像素后，拖拽才开始</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>不管 distance 是多少，您都必须拖拽并等待 1000ms 后拖拽才开始</p>
</div>
</body>
</html>
Events
Перетаскиваемого элементаstart、dragиstopсобытия. Когда начинается перетаскивание,startсобытие запускается; во время перетаскивания,dragсобытие запускается; когда перетаскивание останавливается,stopсобытие запускается.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 事件</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#draggable { width: 16em; padding: 0 1em; }
#draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }
#draggable ul li span.ui-icon { float: left; }
#draggable ul li span.count { font-weight: bold; }
</style>
<script>
$(function() {
var $start_counter = $( "#event-start" ),
$drag_counter = $( "#event-drag" ),
$stop_counter = $( "#event-stop" ),
counts = [ 0, 0, 0 ];
$( "#draggable" ).draggable({
start: function() {
counts[ 0 ]++;
updateCounterStatus( $start_counter, counts[ 0 ] );
},
drag: function() {
counts[ 1 ]++;
updateCounterStatus( $drag_counter, counts[ 1 ] );
},
stop: function() {
counts[ 2 ]++;
updateCounterStatus( $stop_counter, counts[ 2 ] );
}
});
function updateCounterStatus( $event_counter, new_count ) {
// 首先更新视觉状态...
if ( !$event_counter.hasClass( "ui-state-hover" ) ) {
$event_counter.addClass( "ui-state-hover" )
.siblings().removeClass( "ui-state-hover" );
}
// ...然后更新数字
$( "span.count", $event_counter ).text( new_count );
}
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget ui-widget-content">
<p>请拖拽我，触发一连串的事件。</p>
<ul class="ui-helper-reset">
<li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" 被调用 <span class="count">0</span>x</li>
<li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" 被调用 <span class="count">0</span>x</li>
<li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" 被调用 <span class="count">0</span>x</li>
</ul>
</div>
</body>
</html>
Ручки
Разрешить перетаскивание, только когда курсор находится над указанной частью перетаскиваемого элемента. Используйтеhandleопцию, чтобы указать селектор jQuery для элемента (или группы элементов), используемого для перетаскивания объекта.
Или не разрешать перетаскивание, когда курсор находится над указанным элементом (или группой элементов) внутри перетаскиваемого элемента. Используйтеcancelопцию, чтобы указать селектор jQuery, который отменяет функциональность перетаскивания.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - Handles</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
#draggable p { cursor: move; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ handle: "p" });
$( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" });
$( "div, p" ).disableSelection();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p class="ui-widget-header">您只可以在这个范围内拖拽我</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>您可以把我向四周拖拽…</p>
<p class="ui-widget-header">…但是您不可以在这个范围内拖拽我</p>
</div>
</body>
</html>
Возврат позиции
Когда логическое значениеrevertпри установленной опции, после того как перетаскиваемый элемент завершает перетаскивание, он возвращает перетаскиваемый элемент (или его вспомогательный элемент) в исходное положение.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 还原位置</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ revert: true });
$( "#draggable2" ).draggable({ revert: true, helper: "clone" });
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>还原</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>还原助手</p>
</div>
</body>
</html>
Привязка к элементу или сетке
Привяжите перетаскиваемый элемент к внутренним или внешним границам DOM-элемента. Используйтеsnap、snapMode(inner, outer, both) иsnapTolerance(расстояние в пикселях между перетаскиваемым элементом и элементом при привязке) опции.
Или привяжите перетаскиваемый элемент к сетке. Используйтеgridопцию для задания размера ячеек сетки (высота или ширина в пикселях).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 对齐到元素或网格</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
.draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
.ui-widget-header p, .ui-widget-content p { margin: 0; }
#snaptarget { height: 140px; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ snap: true });
$( "#draggable2" ).draggable({ snap: ".ui-widget-header" });
$( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" });
$( "#draggable4" ).draggable({ grid: [ 20, 20 ] });
$( "#draggable5" ).draggable({ grid: [ 80, 80 ] });
});
</script>
</head>
<body>
<div id="snaptarget" class="ui-widget-header">
<p>我是对齐目标</p>
</div>
<br style="clear:both">
<div id="draggable" class="draggable ui-widget-content">
<p>默认（snap: true），对齐到所有其他的 draggable 元素</p>
</div>
<div id="draggable2" class="draggable ui-widget-content">
<p>我只对齐到大盒子</p>
</div>
<div id="draggable3" class="draggable ui-widget-content">
<p>我只对齐到大盒子的外边缘</p>
</div>
<div id="draggable4" class="draggable ui-widget-content">
<p>我对齐到一个 20 x 20 网格</p>
</div>
<div id="draggable5" class="draggable ui-widget-content">
<p>我对齐到一个 80 x 80 网格</p>
</div>
</body>
</html>
Визуальная обратная связь
Обеспечьте обратную связь с пользователем, например перетаскивание объекта с помощью вспомогательного элемента.helperОпция принимает значения 'original' (перемещает перетаскиваемый объект вместе с курсором), 'clone' (перемещает копию перетаскиваемого объекта вместе с курсором) или функцию, которая возвращает DOM-элемент (отображаемый рядом с курсором во время перетаскивания). Используйтеopacityопцию для управления непрозрачностью вспомогательного элемента.
Чтобы различать, какой перетаскиваемый элемент перетаскивается, держите перетаскиваемый элемент поверх остальных во время движения. Если выполняется перетаскивание, используйтеzIndexопция для установки высокого z-index helper или использоватьstackопция, гарантирующая, что при остановке перетаскивания последний перетащенный элемент всегда отображается поверх других элементов в той же группе.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 视觉反馈</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#draggable, #draggable2, #draggable3, #set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
#draggable, #draggable2, #draggable3 { margin-bottom:20px; }
#set { clear:both; float:left; width: 368px; height: 120px; }
p { clear:both; margin:0; padding:1em 0; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ helper: "original" });
$( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" });
$( "#draggable3" ).draggable({
cursor: "move",
cursorAt: { top: -12, left: -20 },
helper: function( event ) {
return $( "<div class='ui-widget-header'>I'm a custom helper</div>" );
}
});
$( "#set div" ).draggable({ stack: "#set div" });
});
</script>
</head>
<body>
<h3 class="docs">助手：</h3>
<div id="draggable" class="ui-widget-content">
<p>原始的</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>半透明的克隆</p>
</div>
<div id="draggable3" class="ui-widget-content">
<p>自定义助手（与 cursorAt 结合）</p>
</div>
<h3 class="docs">堆叠：</h3>
<div id="set">
<div class="ui-widget-content">
<p>我们是 draggables..</p>
</div>
<div class="ui-widget-content">
<p>..它的 z-index 是自动控制的..</p>
</div>
<div class="ui-widget-content">
<p>..带有 stack 选项。</p>
</div>
</div>
</body>
</html>
jQuery UI Draggable + Sortable
Бесшовное взаимодействие Draggable и Sortable.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） + 排序（Sortable）</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable({
revert: true
});
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$( "ul, li" ).disableSelection();
});
</script>
</head>
<body>
<ul>
<li id="draggable" class="ui-state-highlight">请拖拽我</li>
</ul>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</body>
</html>
Другие расширения