標籤：jqueryui-拖動（draggable）-在dom 元素中約束運動
定義和用法通過定義 draggable 地區的邊界來約束每個 draggable 的運動,使用 containment 選項來指定一個父級的 DOM 元素或者一個 jQuery 選取器
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>draggable</title><link rel="stylesheet" href="js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.css"><style>.draggable{width: 90px;height: 90px;padding: 0.5em;float: left;margin: 0 10px 10px 0;cursor: move}h3{clear:left;}#containment-wrapper{width:95%;height: 450px;border:2px solid #ccc;padding:10px;}</style></head><body><h3>在DOM 元素中約束運動：</h3><div id="containment-wrapper"><div id="draggable1" class="draggable ui-widget-content"><p>我被約束在盒子裡</p></div><div class="draggable ui-widget-content"><p id="draggable2" class="ui-widget-header">我被約束在父元素內</p></div></div><script src="js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/external/jquery/jquery.js" type="text/javascript" ></script><script src="js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script><script>$("#draggable1").draggable({containment:"#containment-wrapper",scroll:false});$("#draggable2").draggable({containment:"parent"});</script></body></html>
650) this.width=650;" src="https://s5.51cto.com/wyfs02/M01/8D/A6/wKioL1ilOvWTCghMAABERjHsyIc656.png-wh_500x0-wm_3-wmp_4-s_1144824128.png" title="QQ20170216133825.png" alt="wKioL1ilOvWTCghMAABERjHsyIc656.png-wh_50" />
本文出自 “素顏” 部落格，請務必保留此出處http://suyanzhu.blog.51cto.com/8050189/1898428
JQueryUI-拖動（Draggable）-在DOM 元素中約束運動
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
