Jump to content
xisto Community
Sign in to follow this  
Followers 0
sonesay

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

By sonesay, in Programming

Recommended Posts

sonesay    7

sonesay
Posted

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. 

function moveItem(direction, id, obj){		var parent = obj.parentNode;		var grandParent = parent.parentNode;		var ipHidden;		var hNodes = parent.childNodes;			for(var i=0;i<hNodes.length; i++)			{				if(hNodes[i].tagName == 'INPUT')				{					ipHidden = hNodes[i];					break;				}			}					// move items around		if(direction == 'down')		{			jQuery(grandParent).insertAfter(jQuery(grandParent).next());			jQuery(obj).attr("onClick","moveItem('down', "+(id+1)+", this)");			jQuery(ipHidden).attr("Value",id+1);		}		else if(direction == 'up')		{			jQuery(grandParent).insertBefore(jQuery(grandParent).prev());			jQuery(obj).attr("onClick","moveItem('up', "+(id-1)+", this)");			jQuery(ipHidden).attr("Value",id-1);		}}

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.

post-45102-1235780470_thumb.png

Share this post

Link to post
Share on other sites

truefusion    3

truefusion
Posted (edited)

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;<html xmlns="https://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>
Edited by OpaQue (see edit history)

Share this post

Link to post
Share on other sites

sonesay    7

sonesay
Posted

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://api.jquery.com/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.

function moveItem(direction, id, obj){		var parent = obj.parentNode;		var grandParent = parent.parentNode;		var ipHidden;		var hNodes = parent.childNodes;			for(var i=0;i<hNodes.length; i++)			{				if(hNodes[i].tagName == 'INPUT')				{					ipHidden = hNodes[i];					break;				}			}							// get nodes.		var div_headerNode = obj.parentNode;		var div_methodContainerNode = div_headerNode.parentNode;		var div_methodContainerOtherNode;		var div_methodContainerAll = div_methodContainerNode.parentNode;								// move items around		if(direction == 'down')		{					if(id <= div_methodContainerAll.childNodes.length - 1)			{				for(var i=0; i < div_methodContainerAll.childNodes.length; i++)				{					if(div_methodContainerNode == div_methodContainerAll.childNodes[i])					{						div_methodContainerOtherNode = div_methodContainerAll.childNodes[i+1];					}				}				// set other nodes values				div_methodContainerOtherNode.firstChild.lastChild.value--;				var imageButtons = div_methodContainerOtherNode.firstChild.getElementsByTagName('img');							imageButtons[0].setAttribute("onclick","moveItem('up', "+(id)+", this)");				imageButtons[1].setAttribute("onclick","moveItem('down', "+(id)+", this)");								// set current nodes values and shuffle				jQuery(grandParent).insertAfter(jQuery(grandParent).next());				jQuery(obj).prev().attr("onClick","moveItem('up', "+(id+1)+", this)");				jQuery(obj).attr("onClick","moveItem('down', "+(id+1)+", this)");				jQuery(ipHidden).attr("Value",id+1);							}					}		else if(direction == 'up')		{			if(id > 1)			{				// get other node				for(var i=0; i < div_methodContainerAll.childNodes.length; i++)				{					if(div_methodContainerNode == div_methodContainerAll.childNodes[i])					{						div_methodContainerOtherNode = div_methodContainerAll.childNodes[i-1];					}				}							// set other nodes values				div_methodContainerOtherNode.firstChild.lastChild.value = id;				var imageButtons = div_methodContainerOtherNode.firstChild.getElementsByTagName('img');							imageButtons[0].setAttribute("onclick","moveItem('up', "+(id)+", this)");				imageButtons[1].setAttribute("onclick","moveItem('down', "+(id)+", this)");								// set current node and shuffle around				jQuery(grandParent).insertBefore(jQuery(grandParent).prev());				jQuery(obj).attr("onClick","moveItem('up', "+(id-1)+", this)");				jQuery(obj).next().attr("onClick","moveItem('down', "+(id-1)+", this)");				jQuery(ipHidden).attr("Value",id-1);			}		}}

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?

Share this post

Link to post
Share on other sites

truefusion    3

truefusion
Posted

Could you please explain how it works in your javascript code, in the http://api.jquery.com/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 :D, 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.

 

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.

Share this post

Link to post
Share on other sites

iGuest    3

iGuest
Posted
Posted Image

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 order3. Update order to database with Ajax (State of order has to be save to MySQL).ThereIs only one function 'moveItem(direction, id, this)' that is used toMove items (div_method_container_n*) around. TheseDiv_method_container_b* sit inside a parent divDiv_method_container_all so it makes grouping them a lot easier. IAm using images for the buttons and have use anOnclick="moveItem(direction, id, this)" attribute assigned to them. TheCurrent state I have it up to so far is I am able to move items aroundBut I can only get access to the current div that I am working on so ICan only change the attributes there. I.E modify the moveItem() onlyFor the div with the button being clicked on. I cannot figureOut a way to transverse to the next div and modify its moveItem()According so its up to date and will function correctly when clickedOn. I am after suggests on ways to do this or even a complete rework onThe solution so I can get a better functioning application.

Share this post

Link to post
Share on other sites

iGuest    3

iGuest
Posted
moving the Div in htmlJavascript: Move Blocks Of Div's Around And Change Child Attributes

Hi,

while clicking on the div it should move slowly and add to another tables list .

Thanks.

-question by Rajesh

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept