<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title></title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing:border-box;
}
#contain {
width: 450px;
height: 600px;
border: 1px solid #ccc;
margin:20px;
}
.block,.outer {
width:150px;
height:150px;
border:1px solid pink;
background:#ccc;
}
.inner {
width:50px;
height:50px;
background:#f00;
}
</style>
</head>
<body>
<div id="contain">
<div class="block">
<h3>Draggable</h3>
</div>
</div>
<div class="outer">
<div class="inner"></div>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script>
$(".block").draggable({
// axis:'x',//約束拖動的動作只能在水平(x軸)或垂直(y軸)上執行。可選值: "x", "y"。
cancle:'.outer',
containment:'#contain',//只能在指定元素內拖動
cursor:'crosshair',//指定在做拖拽動作時，鼠標的CSS樣式。
cursorAt:{left:20,top:20},//設置拖動幫手相對於鼠標光標的偏移量。坐標可被指定為一個散列 使用的組合中的一個或兩個鍵：{ top, left, right, bottom } 。
delay:0,//當鼠標按下后，指定時延遲間后才開始激活拖拽動作（單位：毫秒）。此選項可用來阻止當點擊一個元素時可能發生的非期望拖動行為。默認為0
disabled:false,//如果該值設置為true，拖動特效將被禁用。默認值為false
distance:0,//當鼠標點下后，只有移動指定像素后才開始激活拖拽動作，單位為像素。
grid:[5,5],//拖拽元素時，只能以指定大小的方格進行拖動。數組形式為[ x, y ]。
handle:'',//當參數值為true時,只有在特定的元素上觸發鼠標按下事件時，才可以拖動。只有被拖到元素的子元素才可以應用該參數。
/*helper:"clone",允許一個元素被用來進行拖動。
//支持多種類型
--String:如果值設置為"clone", 那么該元素將會被復制，並且被復制的元素將被拖動。
--Function: 當拖動時，函數將返回一個DOM元素以供使用。*/
opacity:.5,//當拖動時，拖動助手元素的不透明度。
refreshPositions:false,//如果設置為true， 所有的可拖動位置在每次鼠標移動時都會被計算。
revert:true,//當拖動停止時，元素是否要被重置到它的初始位置。
/*
* Boolean: 如果設置為true，當拖動停止時，元素位置將被重置。
* String: 如果設置為"invalid", 重置僅當拖動沒有被放置於一個可放置的對象時才會發生。如果設置為"valid", 情況則相反。
* */
revertDuration:500,//動畫重置時間, 單位為微秒。如果revert選項設置為false，則忽略動畫重置時間，默認值為500
scroll:true,//如果設置為true, 當拖動時，div盒模型將自動翻滾。注：拖動超出瀏覽器的可視區域才會出現滾動條
scrollSensitivity:20,//離開可視區域邊緣多少距離開始滾動。距離是相對指針進行計算的，而不是被拖到元素本身。如果scroll 選項設置為false，則不滾動。默認值：20
scrollSpeed:20,//當鼠標指針的值小於scrollSensitivity的值時，窗口滾動的速度。如果scroll選項設置為false，則該參數無效。默認值：20
snap:true,//決定一個元素是否應該吸附到其它元素上。
/* --Boolean: 當設置為 true時, 元素將可以吸附到所有其它可拖動元素上。
* --Selecter: 確定被吸附元素。
* */
snapMode:"both",//決定可拖動元素將要吸附到哪個元素的邊緣。如果snap選項設置為false，則忽略該參數。 可選值: "inner", "outer", "both".
snapTolerance:20,//當距離可吸附元素多遠時，觸發吸附事件。如果snap選項設置為false，則忽略該參數。默認值：20
stack:false,//控制由選擇器所觸發的一系列元素的z-index值, 總是將當前被拖動對象至於最前。對於像窗口管理這樣的應用來說，非常有用。
zIndex:99,//當被拖動時，拖動助手的Z-index值。默認值：false
create:function(event, ui ){},//當一般拖動組件被創建時觸發。
drag:function(event,ui){},//當鼠標在拖動過程中移動時觸發。
start:function(event,ui){},//當拖動開始時觸發。
stop:function(event,ui){}//當拖動停止時觸發。
});
$(".block").draggable("option","cursor","pointer");
$(".inner").draggable({scroll:true});
</script>
</html>
jquery-ui拖放 （draggable參數詳解）
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
猜您在找
HTML之拖放操作draggable
jquery ui draggable,droppable 學習總結
【jQuery】JQuery-ui autocomplete與strtus2結合使用
js jquery, jquery-ui 獲取form各種表單input的值?
通過jquery-ui中的sortable來實現拖拽排序
利用jQuery-UI和jsPlumb實現拖拽連接模型
jquery-ui彈框登錄前端寫法
在Ant-design-pro框架中引入jQuery和jQuery-ui步驟
jquery-ui插件彈出框dialog自定義網頁彈出位置
datetimepicker[jquery-ui]時間控件的三種初始化方法