Javascript: Move Blocks Of Div's Around And Change Child Attributes

sonesay

Feb 28 2009, 12:37 AM

OK I have attached an image of the structure of the HTML. I need help on figuring out a good method to be able to:
1. move div sections up or down the order.
2. change div sections child attributes depending on their position in the order
3. update order to database with Ajax (State of order has to be save to MySQL).

There is only one function 'moveItem(direction, id, this)' that is used to move items (div_method_container_n*) around. These div_method_container_b* sit inside a parent div div_method_container_all so it makes grouping them a lot easier.

I am using images for the buttons and have use an onclick="moveItem(direction, id, this)" attribute assigned to them. the current state I have it up to so far is I am able to move items around but I can only get access to the current div that I am working on so I can only change the attributes there. i.e modify the moveItem() only for the div with the button being clicked on.

I cannot figure out a way to transverse to the next div and modify its moveItem() according so its up to date and will function correctly when clicked on. I am after suggests on ways to do this or even a complete rework on the solution so I can get a better functioning application.

CODE

I had to use a combination jQuery and regular javascript because somethings seem easier to do with one or the other. like I said any suggestions for improvement appreciated thank you.

Comment/Reply (w/o sign-up)

truefusion

Feb 28 2009, 07:14 AM

Uh, here's my version of it, at least the view. It imitates a selected item and moves only the selected item up or down depending on which button is pressed. Since its selection is kept track by IDs, i used hidden INPUT elements to keep track of their number. If you notice, the INPUT have a name as "item[]", so when you send the form, the server side script would (or should) receive an array in the order that the items are ordered in. I have not tested this script any further than what i have provided, so you'll have to see for yourself whether it can be implemented or if it is useful for you. I believe it performs most of the work you are trying to do concerning the view of the form from what i can understand in your post.

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="/path/to/jquery.js"></script>
<script>
var children;
var index;

$(document).ready(
	function (){
		children = $("#container").children("div");

		$("#container div").click(function () {
			$("div#selected").removeAttr("id");
			$(this).attr("id", "selected");
			index = $("#container div").index(this);
		});
	}
);

function updateChildrenList(){
	children = $("#container").children("div");
	index = $("#container div").index($("#container div#selected"));
}

function moveItemUp(){
	if (index > 0){
		$("#container div#selected").insertBefore($(children[index-1]));
	}
	updateChildrenList();
}

function moveItemDown(){
	if (index < (children.length-1)){
		$("#container div#selected").insertAfter($(children[index+1]));
	}
	updateChildrenList();
}
</script>
<style>
#container {
padding: 3px;
border: 1px solid black;
}

#container div {
margin: 3px;
padding: 5px;
background-color: #EEE;
border: 1px solid #CCC;
}

#container div#selected {
border-color: #999;
}

h3 {
margin: 0;
}
</style>
</head>
<body>

<div id="container">
<button onclick="moveItemUp();">Up</button>
<button onclick="moveItemDown();">Down</button>
<!-- -->
<div>
<input type="hidden" name="item[]" value="1"/>
<h3>One</h3>
</div>
<!-- -->
<div>
<input type="hidden" name="item[]" value="2"/>
<h3>Two</h3>
</div>
<!-- -->
<div>
<input type="hidden" name="item[]" value="3"/>
<h3>Three</h3>
</div>
<!-- -->
</div>

</body>
</html>

Comment/Reply (w/o sign-up)

sonesay

Feb 28 2009, 08:57 AM

Yeah you have got my problem solved truefusion and surprisingly with little code. I am just reviewing your javascript code and am still a little confused on how the variable 'index' the the function call of index() is used.

Could you please explain how it works in your javascript code, in the http://docs.jquery.com/Core/index example I am guessing the index() returns an index number based on the current position it is in of similar elements in our case divs?

I've managed to get my version of the code to work correctly minus the ajax and mysql update at this point but the code is very long and there may be some code I can remove. I will post it up just for the sake of sharing but I am still in the process of improving it and reviewing your method then I will choose what to carry on with.

CODE

Thanks yet again for another awesome code truefusion. One last thing I have not been able to find out about is using jQuery selectors. Typically you would pass it a string expression to get your object for instance $('#idhere'); but I am trying to find a way where I can pass it an existing object and then filter it down some more with another string expression like $(object+"new expression here"); but it does not obviously work that way. Is there another method of achieving this?

Comment/Reply (w/o sign-up)

truefusion

Feb 28 2009, 10:29 AM

QUOTE (sonesay @ Feb 28 2009, 03:57 AM)

Could you please explain how it works in your javascript code, in the http://docs.jquery.com/Core/index example I am guessing the index() returns an index number based on the current position it is in of similar elements in our case divs?

I don't fully understand how it works either

, i just tried to mirror the example the best i could, as that seemed the only possible way of getting what i wanted. I didn't think i had to repeat "#container div" to get it to work, which was the reason why it took me a few tries to get the proper index instead of "-1" to show up.

QUOTE (sonesay @ Feb 28 2009, 03:57 AM)

Typically you would pass it a string expression to get your object for instance $('#idhere'); but I am trying to find a way where I can pass it an existing object and then filter it down some more with another string expression like $(object+"new expression here"); but it does not obviously work that way. Is there another method of achieving this?

I've only done similar but with variables: $("#"+var). I believe in your example, object = $("exp"), which would be like saying $($("exp")+"exp2"). If that's the case, then you would use the selector method to retrieve the expression passed; that is, $($("exp").selector+"exp2"). However, this method doesn't work in cases of $(this). Since selector was introduced in version 1.3 of JQuery, if you have an earlier version, you'd have to update your copy of JQuery.

Comment/Reply (w/o sign-up)

(G)

Nov 17 2009, 05:33 AM

OK I have attached an image of the structure of the HTML. I need help on figuring out a good method to be able to:
1. Move div sections up or down the order.
2. Change div sections child attributes depending on their position in the order
3. Update order to database with Ajax (State of order has to be save to MySQL).

There Is only one function 'moveItem(direction, id, this)' that is used to Move items (div_method_container_n*) around. These Div_method_container_b* sit inside a parent div Div_method_container_all so it makes grouping them a lot easier.

I Am using images for the buttons and have use an Onclick="moveItem(direction, id, this)" attribute assigned to them. The Current state I have it up to so far is I am able to move items around But I can only get access to the current div that I am working on so I Can only change the attributes there. I.E modify the moveItem() only For the div with the button being clicked on.

I cannot figure Out a way to transverse to the next div and modify its moveItem() According so its up to date and will function correctly when clicked On. I am after suggests on ways to do this or even a complete rework on The solution so I can get a better functioning application.

Comment/Reply (w/o sign-up)

Javascript: Move Blocks Of Div's Around And Change Child Attributes - Help with function

Javascript: Move Blocks Of Div's Around And Change Child Attributes - Help with function