Déplaçable
Permet de déplacer des éléments à l'aide de la souris.
Pour plus de détails sur l'interaction déplaçable, veuillez consulter la documentation de l'API Draggable Widget.
Fonctionnalité par défaut
Activer la fonctionnalité déplaçable sur n'importe quel élément DOM. Déplacez un objet déplaçable en cliquant avec la souris et en le faisant glisser dans la fenêtre.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 默认功能</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<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>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
AutoScroll
Faites défiler automatiquement le document lorsque le déplaçable se déplace en dehors de la fenêtre. Définissez l'option scroll sur true pour activer le défilement automatique, le réglage précis lorsque le défilement est déclenché et la vitesse de défilement est définie avec les options scrollSensitivity et scrollSpeed.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 自动滚动</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<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>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Contraindre le mouvement
Contraindre le mouvement de chaque déplaçable en définissant les limites de la région déplaçable. Définissez l'option axis pour limiter le chemin du déplaçable à l'axe x ou y, ou utilisez l'option containment pour spécifier un élément DOM parent ou un sélecteur jQuery, tel que « document ».
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 约束运动</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<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>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Style du curseur
Positionnez le curseur lorsque vous faites glisser un objet. Par défaut, le curseur apparaît au milieu de l'objet déplacé. Utilisez l'option cursorAt pour spécifier une autre position par rapport au déplaçable (spécifiez une valeur de pixel par rapport au haut, à droite, en bas, à gauche). Personnalisez l'apparence du curseur en fournissant une option cursor avec une valeur de curseur CSS valide. Les valeurs valides du curseur CSS incluent : par défaut, déplacement, pointeur, réticule, etc.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 光标样式</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<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>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Début différé
Définissez le nombre de millisecondes pour retarder le début du glissement via l'option delay. Utilisez l'option distance pour définir le glisser uniquement après avoir appuyé sur le curseur et fait glisser le pixel spécifié.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 延迟开始</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<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>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Événements
Les événements start, drag et stop sur draggable. L'événement start est déclenché lorsque le glisser commence, l'événement drag est déclenché pendant le glisser et l'événement stop est déclenché lorsque le glisser s'arrête.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 事件</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<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>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Poignées
Le glissement n'est autorisé que lorsque le curseur est sur la partie spécifiée du déplaçable. Utilisez l'option handle pour spécifier le sélecteur jQuery pour l'élément (ou le groupe d'éléments) de l'objet glissé.
pour spécifier un sélecteur jQuery qui désactive le glisser. handle
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - Handles</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<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>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
arrête de glisser, ramène le déplaçable (ou son assistant) à son original position . revert
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 还原位置</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<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>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance »Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Aligner sur un élément ou une grille
Aligner le déplaçable sur les limites intérieures ou extérieures d'un élément DOM. Utilisez les options snap, snapMode (intérieur, extérieur, les deux) et snapTolerance (distance en pixels entre le déplaçable et l'élément lorsque l'alignement est appelé).
Ou alignez le déplaçable sur la grille. Définissez les dimensions des cellules de la grille (hauteur ou largeur en pixels) via l'option grid.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 对齐到元素或网格</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<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>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Retour visuel
Fournit un retour à l'utilisateur, tout comme faire glisser des objets de manière assistante. helper L'option accepte les valeurs 'original' (déplacer l'objet déplaçable avec le curseur), 'clone' (déplacer une copie du déplaçable avec le curseur), ou une fonction qui renvoie un élément DOM qui s'affiche à proximité le curseur pendant le déplacement. Contrôlez la transparence de l'assistant via l'option opacity.
Pour distinguer quel déplaçable est déplacé, gardez le déplaçable en mouvement devant. Si vous faites glisser, utilisez l'option zIndex pour définir l'index z de hauteur de l'assistant, ou utilisez l'option stack pour vous assurer que lorsque vous arrêtez de glisser, le dernier élément déplacé apparaît toujours au-dessus des autres éléments du groupe. .
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 视觉反馈</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<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>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
jQuery UI Draggable + Sortable
Interaction transparente entre Draggable et Sortable.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） + 排序（Sortable）</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<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>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
