JavaScriptを：ページ内のドラッグ、ページ内の問題を解決するためにドラッグし、選択したテキスト

次のようにHTML文書全体のdivのブロックをドラッグする前に、ブロックは現在、親のdiv div要素、divのサブドラッグ親のdivに適用されます。

裁判官は、前の文ごとに可視領域の幅を変更する場合にのみ。

		document.onmousemove = function(ev){
			var l = ev.clientX - disX;
			var t = ev.clientY - disY;
			if (l<30) {
				l = 0;
			} else if(l>oDiv2.offsetWidth-oDiv1.offsetWidth){
				l = oDiv2.offsetWidth-oDiv1.offsetWidth;
			}//div块不超出左右两边，oDiv2.offsetWidth是div2可视区的宽度
			if (t<30) {
				t = 0;
			} else if(t>oDiv2.offsetHeight-oDiv1.offsetHeight){
				t = oDiv2.offsetHeight-oDiv1.offsetHeight;
			}//div块不超出上下两边，oDiv2.offsetHeight是div2可视区的高度
			
			oDiv1.style.left = l + 'px';
			oDiv1.style.top = t + 'px';
		};

完全な例：

<!DOCTYPE html>
<html>
<head>
	<title>拖拽</title>
<style type="text/css">
	#div1{ height: 100px; width: 100px; background-color: red; position: absolute; }
	#div2{ height: 600px; width: 800px; background-color: gray; position: relative; }
</style>
<script type="text/javascript">
window.onload = function(){
	document.oncontextmenu = function(){
		return false;
	}
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');

	var disX = 0;
	var disY = 0;

	oDiv1.onmousedown = function(ev){
		disX = ev.clientX - oDiv1.offsetLeft;
		disY = ev.clientY - oDiv1.offsetTop;

		document.onmousemove = function(ev){
			var l = ev.clientX - disX;
			var t = ev.clientY - disY;
			if (l<30) {
				l = 0;
			} else if(l>oDiv2.offsetWidth-oDiv1.offsetWidth){
				l = oDiv2.offsetWidth-oDiv1.offsetWidth;
			}//div块不超出左右两边，oDiv2.offsetWidth是div2可视区的宽度
			if (t<30) {
				t = 0;
			} else if(t>oDiv2.offsetHeight-oDiv1.offsetHeight){
				t = oDiv2.offsetHeight-oDiv1.offsetHeight;
			}//div块不超出上下两边，oDiv2.offsetHeight是div2可视区的高度
			
			oDiv1.style.left = l + 'px';
			oDiv1.style.top = t + 'px';
		};

		document.onmouseup = function(){
			document.onmousemove = null;
			document.onmouseup = null;
		};
		return false;
	};
};
</script>
</head>
<body>ajsoigjiagioanreihirea
<div id="div2">
	jloajosjog[adgoiaog]
	<div id="div1"></div>
</div>

</body>
</html>

最後に、ページ内の選択したテキストをドラッグしながら、あなたが問題を解決することができ、リターン虚偽の文を追加。

以下の関数は、フレームが30個の画素近距離DIV1のDIV2、直接ゼロに設定された距離未満である場合、吸着を増大させることであるかどうかを決定します。

陳Xuejun

公開された126元の記事・ウォン称賛7 ・ビュー10000 +

プライベートの手紙の懸念

JavaScriptを：ページ内のドラッグ、ページ内の問題を解決するためにドラッグし、選択したテキスト

おすすめ