現在、jQueryUIのdraggableを使ってオブジェクトをドラッグできるようにしています。
containmentも使用し、特定の範囲内で動くようにしています。
特定の範囲は、現状四角形なのですが、これを台形にしたいです。
実現したいこと
ドラッグできる移動範囲を台形にしたい
該当のソースコード
html
1<body> 2<div id="jquery-ui-draggable-wrap" class="ui-widget-content"> 3<div id="jquery-ui-draggable" class="ui-widget-content"> 4<div class="jquery-ui-draggable ob1"/> 5<div class="jquery-ui-draggable ob2"/> 6 7<script> 8 jQuery( function() { 9 jQuery('.jquery-ui-draggable') . draggable( { 10 containment: '#jquery-ui-draggable-wrap', 11 scroll: false, 12 } ); 13} ); 14</script> 15</body>
css
1#jquery-ui-draggable-wrap { 2 position: absolute; 3 width: 965px; 4 height: 550px; 5 top:110px; 6 left: 30px; 7 border-style: dashed; 8 z-index: 1; 9 overflow: visible; 10} 11.ob1 { 12 position: fixed; 13 top: 350px; 14 left: 580px; 15 width: 139px; 16 height: 92px; 17 background: url('../images/page1.png'); 18 background-repeat: no-repeat; 19} 20.ob2 { 21 position: fixed; 22 width: 139px; 23 height: 122px; 24 background: url('../images/page2.png'); 25 background-repeat: no-repeat; 26}
試したこと(やり方がよくなかったのかも)
・css上で::before/::afterを使い四角の左右上部に三角オブジェクトを配置してみたが、ドラッグできてしまう
・beforeなど使わず、他オブジェクトの回り込みを利用して範囲をせばめてみようとしたが、ドラッグできてしまう
・ob1とob2のpaddingで移動範囲をせばめることはできるが、台形にはせばめられない(四角くなる)
・現在の範囲のborderを使用して移動範囲をせばめようとしたが、台形にはせばめられない(四角くなる)
補足情報
現在、ドラッグ後の地点を取得するようなことは特にしていません。
できるだけシンプルに、移動範囲の形を変えるだけで実現できないかと考えています。
いろいろと検索したのですが見つけられなかったため、こちらに質問させていただきました。
よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/16 07:56
2018/02/16 07:58
2018/02/16 08:04
2018/02/16 08:09
2018/02/19 04:43
2018/02/19 06:52
2018/02/20 01:40
2018/02/20 02:31 編集
2018/03/07 06:32
2018/03/13 05:37