www.webdeveloper.com
Results 1 to 2 of 2

Thread: Easier Position method?

Hybrid View

  1. #1
    Join Date
    Aug 2010
    Posts
    1

    Easier Position method?

    I am using prototype to write up a seating chart type page. Basically this page will allow users to place items in a "room" (div) and move these around. I am new to prototype and noticed their position methods were depreciated.
    So I wrote a function by hand, but I think there must be an easier way to do what I am attempting.

    What I am attempting to do is find a position inside of a div that does not already have a smaller inner div there. I have an array "items" filled with all of the locations of divs already there and when I place a new div I try to place it at position 10,10 and check its corners to make sure it doesn't overlap any of the current divs. And reiterate if a div is there. Here is my function:

    Code:
    getPlacement: function (type) {
    			var offset = 10;			
    			var current = {
    				x: 10,
    				y: 10
    			};	
    			var overlay = true;
    			var itemWidth = globalDimensions[type].width;
    			var itemHeight = globalDimensions[type].height;
    			
    			while (overlay) {
    				overlay = false;
    				if( (current.x + itemWidth) > globalDimensions['room'].width) {
    					current.x = 10;
    					current.y = current.y + 20;
    				}
    				
    				for(var i = 0; i < items.length; i++) {
    					var div = $(items[i].divID);
    					var move = false;
    					if ((current.x >= div.offsetLeft && current.x <= (div.offsetLeft + div.offsetWidth)) &&
    					   (current.y >= div.offsetTop && current.y <= (div.offsetTop + div.offsetHeight))) {
    						move = true;
    					}else if (((current.x + itemWidth) >= div.offsetLeft && (current.x + itemWidth) <= (div.offsetLeft + div.offsetWidth)) &&
    					   (current.y >= div.offsetTop && current.y <= (div.offsetTop + div.offsetHeight))) {
    						move = true;
    					}else if ((current.x >= div.offsetLeft && current.x <= (div.offsetLeft + div.offsetWidth)) &&
    					   ((current.y + itemHeight) >= div.offsetTop && (current.y + itemHeight) <= (div.offsetTop + div.offsetHeight))) {
    						move = true;
    					}else if (((current.x + itemWidth) >= div.offsetLeft && (current.x + itemWidth) <= (div.offsetLeft + div.offsetWidth)) &&
    					   ((current.y + itemHeight) >= div.offsetTop && (current.y + itemHeight) <= (div.offsetTop + div.offsetHeight))) {
    						move = true;
    					}
    					
    					
    					
    					if(move) {
    						current.x = (div.offsetLeft + div.offsetWidth) + offset;
    						overlay = true;
    						break;
    					}
    				}
    			}
    			
    			return current;
    
    		}
    This does work with an issue if I run out of room and go beyond the y boundary... but I will work on that more later. I was just wondering if there is already functionality out there that can handle this easier and cleaner??

    Anyone have any suggestions? questions?

    Thanks in advance

  2. #2
    Join Date
    Oct 2006
    Posts
    939
    fill table cells

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles