1. 程式人生 > >JS拖拽DIV效果

JS拖拽DIV效果

function print(obj) {
	
	Bxcn.Dom.html("text",Bxcn.Dom.html("text")+String.prototype.toString.call(obj));
}
function println(obj) {
	
	Bxcn.Dom.html("text",Bxcn.Dom.html("text")+String.prototype.toString.call(obj)+"<br/>");
}


println("width:"+document.body.clientWidth+" height:" + document.body.clientHeight);
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;

var body_width = document.body.clientWidth;
var body_height = document.body.clientHeight;
println("width:"+width+" height:" + height);

println("顯示器工作區域width:"+window.screen.availWidth+" height:" + window.screen.availHeight);

println("顯示器解析度width:"+window.screen.width+" height:" + window.screen.height);


var tagObj = Bxcn.Dom.getId("tag");
var obj = Bxcn.Dom.getId("bg");


Bxcn.Dom.css(obj,{width:body_width+"px",height:body_height+"px",display:"none",zIndex:99999});

var isMove = false;

var m_width,m_height,box_left,box_top,startX,startY,endX,endY;

	/*document.body.onmousemove = function(e){
		var event = e || window.event;
		
		var target = event.srcElement || event.target;
		
		
		m_width =event.clientX;
		m_height = event.clientY;
		
		if (isMove) {
 
			var moveWidth = startX - box_left;
			var moveHeight = startY - box_top;
			
			var now_move_left =  Math.abs(startX) - Math.abs(m_width);
 
			
			if (now_move_left>0) {
				
				
				
				if(moveWidth>now_move_left) {
					tagObj.style.left = (m_width-box_left)+"px";	
				}else {
					
					tagObj.style.left = "0px";
				}
				
			} else {
				
				moveWidth = body_width-startX-endX;
				
				var now_move_right = m_width - startX;
				
				
				Bxcn.Dom.html("mouse",moveWidth +"  =>  "+ now_move_right);
				
				if(moveWidth>now_move_right) {
					
					tagObj.style.left = (m_width-box_left)+"px";	
				}else {
					
					tagObj.style.left = (body_width-200)-"0px";
				}
			}
 
 	 
			
			//var moveHeight = startY - box_top;
			
			var now_move_top =  Math.abs(startY) - Math.abs(m_height);
			
			if (now_move_top > 0) {
				
				if(moveHeight>now_move_top) {
					tagObj.style.top = (m_height-box_top)+"px";	
				}else {
					
					tagObj.style.top = "0px";
				}
				
				
			} else{
			
				moveHeight = height-startY-endY;
				
				var now_move_end = m_height - startY;
				
				
				
				
				if(moveHeight>now_move_end) {
					
					tagObj.style.top = (m_height-box_top)+"px";	
				}else {
					
					tagObj.style.top = (height-100)-"px";
				}
			}
			
			
		}
	}*/

 


var Move = false;
tagObj.onmousedown = function(e) {
	
	var event = e || window.event;
	
	box_left = event.offsetX || event.layerX;
	box_top  = event.offsetY || event.layerY;
	startX   = event.clientX;
	startY   = event.clientY;	
	
	endX = this.style.width.split("px")[0] - box_left;
	endY = this.style.height.split("px")[0] - box_top;
	
	//o.style.cursor="default";
	
	Bxcn.Dom.css(tagObj,{cursor:"move"});

	Move = true;
}

tagObj.onmouseup = function() {
	Move = false;
}
tagObj.onmouseout = function() {
	Move = false;
}


tagObj.onmousemove =  function(e) {
	
	var event = e || window.event;
		
		var target = event.srcElement || event.target;
		
		
		m_width =event.clientX;
		m_height = event.clientY;
		
		if (Move) {
 
			var moveWidth = startX - box_left;
			var moveHeight = startY - box_top;
			
			var now_move_left =  Math.abs(startX) - Math.abs(m_width);
 
			
			if (now_move_left>0) {
				
				
				
				if(moveWidth>now_move_left) {
					tagObj.style.left = (m_width-box_left)+"px";	
				}else {
					
					tagObj.style.left = "0px";
				}
				
			} else {
				
				moveWidth = body_width-startX-endX;
				
				var now_move_right = m_width - startX;
				
				
				Bxcn.Dom.html("mouse",moveWidth +"  =>  "+ now_move_right);
				
				if(moveWidth>now_move_right) {
					
					tagObj.style.left = (m_width-box_left)+"px";	
				}else {
					
					tagObj.style.left = (body_width-200)-"0px";
				}
			}
 
 	 
			
			//var moveHeight = startY - box_top;
			
			var now_move_top =  Math.abs(startY) - Math.abs(m_height);
			
			if (now_move_top > 0) {
				
				if(moveHeight>now_move_top) {
					tagObj.style.top = (m_height-box_top)+"px";	
				}else {
					
					tagObj.style.top = "0px";
				}
				
				
			} else{
			
				moveHeight = height-startY-endY;
				
				var now_move_end = m_height - startY;
				
				
				
				
				if(moveHeight>now_move_end) {
					
					tagObj.style.top = (m_height-box_top)+"px";	
				}else {
					
					tagObj.style.top = (height-100)-"px";
				}
			}
			
			
		}
	
	Bxcn.Dom.css(tagObj,{cursor:"move"});
}

 


相關推薦

JSDIV效果

function print(obj) { Bxcn.Dom.html("text",Bxcn.Dom.html("text")+String.prototype.toString.call(obj)); } function println(obj) { Bx

JSdiv(移動)

 #dv {     width:100px;     height:100px;     background-color:blue;     border-ra

原生js效果

scrip char back width eve top abs box document <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

利用原生js做出彈射效果

var Odiv = document.getElementById('demo'); Odiv.onmousedown = function (e) {//拖拽小物體 clearInterval(this.timer); var event = e || window.event;

手機端簡單js效果

網上找了好多js實現拖拽效果的demo,但是這是唯一的一個能夠實現手機端的拖拽效果,至於android、iphone、華為等手機上的app是否能夠正常拖拽,有待測試。先儲存下來: <!docty

js效果詳細講解

設置 物體 tcap this absolut ansi fse .get content <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

效果 第一步 設置 可的屬性 draggable="true" 綁定drag 事件 第二步 設置 放置位置 觸發的事件 dragover 第三步 設置 放置之後 觸發的事件 dragover 下面請看代碼:

存儲 targe 觸發 get tex 一個 func ons *** (function(){ /*-------節點--------*/ var myimg = document.getElementById(‘myimg‘); var dropBox

如何DIV邊線並左右自適應改變大小?

table row tle urn || bsp prop posit repl //樹圖拉伸 jQuery(function ($){ var doc = $(document), dl = $(".side-tree"), dc

js分析

diff gpo strong col win mousedown 距離 設置 tle js拖拽分析 思路 1、三個鼠標事件,mousedown,mousemove,mouseup 2、可移動性absolute 3、邊界限制 得到鼠標點擊處和div邊界的距離,然後得出top

js 實現面向對象

oct utf-8 xhtml bsp AC name java prototype new // JavaScript Document /*構造函數*/ function Drag(id){ this.disX = 0;

js陰影

absolute get turn IV create ech 再次 pen eth css如下 #box{ width: 200px; height: 200px; position: absolute;background-color: red;} .border_b

js

拖拽 body pub relative 想象 mousedown scl remove 還原 HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

前端div 效果

col urn als mouseup use document overflow 前端 author /** * author levi * url http://levi.cg.am */ $(function() { $(document).mouse

DOM事件 --滑鼠div

實現效果: 分析: 1.當滑鼠在粉色div上按下時,捕獲onmousedown事件,獲取滑鼠的座標clientX,clientY 2.滑鼠在按下後移動,整個div跟隨著移動,獲取滑鼠按下時相對於整個div的座標,即下圖中的disx,dixy 3.滑鼠擡起後,整個

JS元素原理及實現程式碼

拖拽功能主要是用在讓使用者做一些自定義的動作,比如拖動排序,彈出框拖動移動等等,效果還是蠻不錯的。下面講解一下拖拽的原理,希望可以幫助到有需要的朋友! 一、拖拽的流程動作 ①滑鼠按下 ②滑鼠移動 ③滑鼠鬆開 二、拖拽流程中對應的JS事件 ①滑鼠按下會觸發onmousedown事件 obj

Jquery實現div巢狀的iframe不卡頓

css * {padding: 0;margin: 0;box-sizing: border-box;} .main {width: 1000px;height: 700px;position: absolute;left: 50%;top: 50%;margi

js和放置 javascript drag and drop

js拖拽和放置效果.這個drag-drop.htmlXML/HTML程式碼<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional

JavaScript 滑鼠div 改變其大小

轉自: http://www.cnblogs.com/yushang/archive/2013/03/19/2968782.html 想讓div實現拖拽改變大小功能,類似於soso地圖(即現在的騰訊地圖)的看街景時地圖可以拖拽等功能 分析一下,實現這個功能需要:滑鼠按下,滑鼠

JavaScript 在vue頁面下實現滑鼠div改變其大小,適用於鷹眼地圖,街景地圖等。

首先看效果,如圖,滑鼠懸浮在地圖的右上角小框中時,提示“拖動調整大小”,可以給小框加個好看的圖示。點選可以進行拖拽。 基於上一篇部落格:https://blog.csdn.net/acoolgiser/article/details/84866426  實現。 程式碼:

滑鼠事件點選div

<div id="div1"></div> #div1{ width:100px; height: 100px; background:red; position: absolute; } window.onload = function() { var