www.webdeveloper.com
Results 1 to 5 of 5

Thread: how i can browse page by drag? (ajax)

Hybrid View

  1. #1
    Join Date
    Nov 2011
    Posts
    35

    Exclamation how i can browse page by drag? (ajax)

    hi i working on my mmo game and i added map to game but i want players can browse map by drag
    any one have idea or source code?

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    You can use the mousedown, mousemove and mouseup events to detect dragging. Here's a simple dragging example:
    Code:
    <style>
    	#map { background-color: red; cursor: move; position: absolute; width: 100px; height: 100px; }
    </style>
    
    
    <div id="map">Map</div>
    
    
    <script>
    
    
    	var isDraggingMap = false;
    
    
    	function mapDragStartHandler(event) {
    		isDraggingMap = true;
    		return mapDragMoveHandler(event);
    	}
    
    
    	function mapDragMoveHandler(event) {
    		if (isDraggingMap) {
    			var map = document.getElementById('map');
    			map.style.left = (event.pageX-50)+'px';
    			map.style.top = (event.pageY-50)+'px';
    			return false;
    		}
    	}
    
    
    	function mapDragEndHandler(event) {
    		if (isDraggingMap) {
    			isDraggingMap = false;
    			return false;
    		}
    	}
    
    
    	document.getElementById('map').addEventListener('mousedown', mapDragStartHandler);
    	document.addEventListener('mousemove', mapDragMoveHandler);
    	document.addEventListener('mouseup', mapDragEndHandler);
    
    
    </script>

  3. #3
    Join Date
    Nov 2011
    Posts
    35
    thank you very much i don't know whats i must say for thank you
    but i think you have error in this example code don't work
    ihope you can add more example for help me thank you

  4. #4
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    The example I posted works perfectly in both Google Chrome and Firefox. If you're using an older version of IE you'll have to use attachEvent instead of addEventListener.

    (Also note that I've omitted obvious html tags such as doctype, <html> and <body>. Maybe that's causing problems for you if you just copied and pasted the code.)

  5. #5
    Join Date
    Nov 2011
    Posts
    35
    ok error come from IE its work good with firefox thank you again

Thread Information

Users Browsing this Thread

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

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