今日は、オブジェクトのドラッグが特定のdivからドラッグされ、吸着機能をドラッグするのを防ぐ方法を調べます。
前回、ドラッグとドロップについて話しましたが、視覚領域からドラッグすることはできません。これに基づいて、親から引きずられないように親Divを追加します。原則は以前と同じですが、簡単です。
HTMLコード：
<div id = "div2"> <div id = "div1"> </div> </div>
CSSコード：
<style type = "text/css"> ＃div1 {width：100px;高さ：100px;背景：赤;位置：絶対; }＃div2 {width：400px;高さ：300px;背景：#cccccc;位置：相対; } </style>JavaScriptコード：
<script type = "text/javascript"> //空のdivをドラッグアンドドロップします。 Firefoxの低いバージョンにはbug window.onload = function（）{var odiv = document.getElementbyId（ "div1"）; var odiv2 = document.getElementById（ "div2"）; var disx = 0; var disy = 0; odiv.onmousedown = function（ev）{var oevent = ev ||イベント; disx = oevent.clientx -odiv.offsetLeft; disy = oevent.clienty -odiv.offsettop; document.onmousemove = function（ev）{var oevent = ev ||イベント; // div var odivleft = oevent.clientx -disxの現在の場所を保存します。 var odivtop = oevent.clienty -disy; if（odivleft <0）{odivleft = 0; } else if（odivleft> odiv2.offsetwidth -odiv.offsetwidth）{odivleft = odiv2.offsetwidth -odiv.offsetwidth; } if（odivtop <0）{odivtop = 0; } else if（odivtop> odiv2.offsetheight -odiv.offsetheight）{odivtop = odiv2.offseetheight -odiv.offseTheight; } odiv.style.left = odivleft + 'px'; odiv.style.top = odivtop + 'px'; }; document.onmouseup = function（）{document.onmousemove = null; document.onmouseup = null; }; falseを返します。 //デフォルトのイベントをブロックし、Firefoxのバグを解決します}; }; </script>レンダリングは次のとおりです。
簡単です。
次のことは、自動的に吸収する方法です。
実際、これは人々によってよく使用されます。たとえば、PSに小さなウィンドウがページの端にドラッグすると、自動的に添付されます。
ドラッグアンドドロップはどのようにそのような機能を持つことができますか？
これは、実際には以前の運動中に言及されました。タクシーに乗るようなもので、運転手に正確に駐車することはできません。彼は目的地の近くに駐車しなければなりません。
プログラムにも同じことが言えます。そこにたどり着く時間がほとんどないように、直接割り当てることができます。ドラッグしたオブジェクトが左から50px離れているとし、左側にあると思います。0に直接割り当てられている場合、自動的に吸着します。
原則は非常に単純です。コードがどのように実装されているかを見てみましょう。少し変更してください
<script type = "text/javascript"> window.onload = function（）{var odiv = document.getElementById（ "div1"）; var odiv2 = document.getElementById（ "div2"）; var disx = 0; var disy = 0; odiv.onmousedown = function（ev）{var oevent = ev ||イベント; disx = oevent.clientx -odiv.offsetLeft; disy = oevent.clienty -odiv.offsettop; document.onmousemove = function（ev）{var oevent = ev ||イベント; var odivleft = oevent.clientx -disx; var odivtop = oevent.clienty -disy; //残りが50未満の場合、自動的に0になります。これは、（odivleft <50）{odivleft = 0; } else if（odivleft> odiv2.offsetwidth -odiv.offsetwidth）{odivleft = odiv2.offsetwidth -odiv.offsetwidth; } if（odivtop <0）{odivtop = 0; } else if（odivtop> odiv2.offsetheight -odiv.offsetheight）{odivtop = odiv2.offseetheight -odiv.offseTheight; } odiv.style.left = odivleft + 'px'; odiv.style.top = odivtop + 'px'; }; document.onmouseup = function（）{document.onmousemove = null; document.onmouseup = null; }; falseを返します。 }; }; </script>次回は、高度なアプリケーションについて説明しますが、これはより責任があり便利です。ドラッグアンドドロップ機能が改善されました。
たとえば、写真をドラッグしてテキストを選択します。たとえば、現在使用しているドラッグページには1つのdivのみがありますが、通常の開発では遭遇しません。
実際、ページに何かがある場合、このドラッグでどのような問題が発生しますか？ ？ ？
次回は解決されます〜楽しみにしてください