Boleh diseret
Membenarkan elemen bergerak menggunakan tetikus.
Untuk butiran lanjut tentang interaksi boleh seret, sila lihat dokumentasi API Widget Boleh Seret.
Kefungsian lalai
Dayakan kefungsian boleh seret pada mana-mana elemen DOM. Gerakkan objek yang boleh diseret dengan mengklik dengan tetikus dan menyeretnya dalam port pandangan.
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>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
AutoTatal
Tatal dokumen secara automatik apabila boleh seret bergerak di luar port pandangan. Tetapkan pilihan scroll kepada benar untuk mendayakan tatal automatik, penalaan halus apabila tatal dicetuskan dan kelajuan tatal ditetapkan dengan pilihan scrollSensitivity dan 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>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Kekang gerakan
Kekang gerakan setiap yang boleh diseret dengan mentakrifkan sempadan kawasan yang boleh diseret. Tetapkan pilihan axis untuk mengehadkan laluan boleh seret kepada paksi-x atau y, atau gunakan pilihan containment untuk menentukan elemen DOM induk atau pemilih jQuery, seperti 'dokumen.'
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>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Gaya kursor
Letakkan kursor apabila menyeret objek. Secara lalai, kursor muncul di tengah-tengah objek yang diseret. Gunakan pilihan cursorAt untuk menentukan kedudukan lain berbanding dengan yang boleh diseret (nyatakan nilai piksel berbanding atas, kanan, bawah, kiri). Sesuaikan penampilan kursor dengan menyediakan pilihan cursor dengan nilai kursor CSS yang sah. Nilai kursor CSS yang sah termasuk: lalai, bergerak, penunjuk, silang, dsb.
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>Run instance »
Klik butang "Run Instance" untuk melihat instance dalam talian
Lengah mula
Tetapkan bilangan milisaat untuk menangguhkan permulaan penyeretan melalui pilihan delay. Gunakan pilihan distance untuk menetapkan penyeretan hanya selepas kursor ditekan dan piksel yang ditentukan diseret.
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>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Acara
Acara start, drag dan stop pada boleh seret. Acara start dicetuskan apabila menyeret bermula, acara drag dicetuskan semasa menyeret dan acara stop dicetuskan apabila menyeret berhenti.
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>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Pemegang
Menyeret hanya dibenarkan apabila kursor melepasi bahagian yang boleh diseret yang ditentukan. Gunakan pilihan handle untuk menentukan pemilih jQuery untuk elemen (atau kumpulan elemen) objek yang diseret.
untuk menentukan pemilih jQuery yang melumpuhkan penyeretan. 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>Run Instance»Klik butang "Run Instance" untuk melihat contoh dalam talian
berhenti menyeret, mengembalikan boleh seret (atau pembantunya) kepada asalnya kedudukan . 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>Run instance »Klik butang "Run Instance" untuk melihat instance dalam talian
Jajarkan ke elemen atau grid
Jajarkan boleh seret ke sempadan dalam atau luar elemen DOM. Gunakan pilihan snap, snapMode (dalam, luar, kedua-duanya) dan snapTolerance (jarak dalam piksel antara boleh seret dan elemen apabila penjajaran dipanggil).
Atau selaraskan yang boleh diseret ke grid. Tetapkan dimensi sel grid (tinggi atau lebar dalam piksel) melalui pilihan 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>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Maklum balas visual
Memberikan maklum balas kepada pengguna, sama seperti menyeret objek dengan cara pembantu. helper Pilihan menerima nilai 'asal' (gerakkan objek boleh seret dengan kursor), 'klon' (gerakkan salinan boleh seret dengan kursor) atau fungsi yang mengembalikan elemen DOM yang dipaparkan berhampiran kursor semasa menyeret. Kawal ketelusan pembantu melalui pilihan opacity.
Untuk membezakan yang boleh diseret yang sedang diseret, pastikan yang boleh diseret bergerak di hadapan. Jika anda menyeret, gunakan pilihan zIndex untuk menetapkan indeks z ketinggian pembantu, atau gunakan pilihan stack untuk memastikan bahawa apabila anda berhenti menyeret, item yang diseret terakhir sentiasa muncul di atas item lain dalam kumpulan .
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>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
JQuery UI Boleh Seret + Boleh Isih
Interaksi lancar antara Boleh Seret dan Boleh Isih.
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>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
