www.webdeveloper.com
Results 1 to 6 of 6

Thread: Drag, drop, snap div layout (BBC style)

  1. #1
    Join Date
    Jun 2007
    Posts
    73

    Post Drag, drop, snap div layout (BBC style)

    I am trying to create a page with div modules which contain various content. These should be able to be dragged by the user and dropped into a new position but I want them to snap into position below or above the other div module where they are dropped. An example of this can be seen on the BBC homepage (http://www.bbc.co.uk).

    I have created my basic layout which is a div container with 3 children: left, center, and right. These children will be my columns. Each of the columns have div modules as children but I will want the user to be able to move a div module from one column to another.

    As I understand I will be using 3 events for the drag drop facility. One is when the user clicks on a div module (onMouseDown), another is when the user moves the mouse (onMouseMove), and finally when the user releases the mouse button (OnMouseUp). However, I am unsure of how to approach this and particularly how to get the div module to detect where it should snap into place.

    My layout html is shown below (very basic due the development and testing):

    Code:
    <html>
    	<head>
    		<script type="text/javascript">
    		</script>
    		<style type="text/css">
    			div#container
    			{
    				position: fixed;
    				left: 50%;
    				margin-left: -450px;
    				width: 900px;
    				height: auto;
    			}
    			div#left
    			{
    				position: relative;
    				width: 300px;
    				height: auto;
    				float: left;
    			}
    			div#center
    			{
    				position: relative;
    				width: 300px;
    				height: auto;
    				float: left;
    			}
    			div#right
    			{
    				position: relative;
    				width: 300px;
    				height: auto;
    				float: left;
    			}
    			.module
    			{
    				position: relative;
    				width: 300px;
    				height: auto;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="container">
    			<div id="left">
    				<div id="moveable1" class="module">
    					1
    				</div>
    				<div id="moveable2" class="module">
    					2
    				</div>
    				<div id="moveable3" class="module">
    					3
    				</div>
    			</div>
    			<div id="center">
    				<div id="moveable4" class="module">
    					4
    				</div>
    				<div id="moveable5" class="module">
    					5
    				</div>
    				<div id="moveable6" class="module">
    					6
    				</div>
    			</div>
    			<div id="right">
    				<div id="moveable7" class="module">
    					7
    				</div>
    				<div id="moveable8" class="module">
    					8
    				</div>
    				<div id="moveable9" class="module">
    					9
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    Any help and/or advice on this will be much appreciated.

    Kind regards,

    John Askew

  2. #2
    Join Date
    Jun 2007
    Posts
    73
    Perhaps this tutorial is of use. I want a variation of this sort of thing to work across multiple columns.

    http://www.switchonthecode.com/tutor...rag-drop-lists

  3. #3
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    At least 98% of internet users' DNA is identical to that of chimpanzees

  4. #4
    Join Date
    Jun 2007
    Posts
    73
    Thanks Fang for that link. I had a look and the problem with that code is that is is for an unordered list and when the code is adapted for a div it looks for the immediate parent as a container although in my layout there are 2 other containers (left, center, right) depending on the current container. Do you have any more suggestions?

    Additionally, I want the theory for snapping the div into place so that I can code this from scratch. The main thing I cannot understand is how the div being dragged knows where it should snap into.

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    A div is allowed within a list item.
    so that I can code this from scratch
    Why reinvent the wheel
    At least 98% of internet users' DNA is identical to that of chimpanzees

  6. #6
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,681
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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