Need some help with some JS logic

wream · 07-17-2008, 02:12 PM

I'm trying to create a sortable drag and drop list using scriptaculous. Currently the drag and drop functionality is working fine with this code:

Code:

<head>
<script type="text/javascript">
window.onload = function() {
	Sortable.create('dragDrop1', {containment: ['dragDrop1','dragDrop2'], dropOnEmpty: true});
	
	Sortable.create('dragDrop2', {containment: ['dragDrop1','dragDrop2'], dropOnEmpty: true, onChange: displayProduct});
}

displayProduct() {
	code here to change product to red;
}
</script>
</head>

<body>
<ul id="dragDrop1">
	<li id="option_0" class="feature0">feature 1</li>
	<li id="option_1" class="feature1">feature 2</li>
	<li id="option_2" class="feature2">feature 3</li>
	<li id="option_3" class="feature3">feature 4</li>
	<li id="option_4" class="feature4">feature 5</li>
</ul>

<ul id="dragDrop2">
		
</ul>
</body>

Now what I need to do is add some logic for what's in the "dragDrop2" list. I have 5 products (x) which have any number (y) of the 5 features (z) listed in menu "dragDrop1". What I want to do, to keep it simple for explanation purposes, is somehow change the color of the the product name to red IF it's features match what is in "dragDrop2".

For example:
if y = z change color of x

My main problem is i need to be able to make this flexible since there could be any number of products and/or features for different code that would need to use this script. Also, if "dragDrop2" contains multiple features, the product must have ALL of the features or it's color does not get changed to red.

If it helps, here is the <html> for the products and it's features:

Code:

<div id="row1">
	<div class="productLeft">
		<p>Product 1</p>
	</div>
	<div class="productRight">
		<ul id="product0">
			<li class="feature0">feature 1</li>
			<li class="feature1">feature 2</li>
			<li class="feature2">feature 3</li>
		</ul>
	</div>
	<br class="clb" />
</div>
	
<div id="row2">
	<div class="productLeft">
		<p>Product 2</p>
	</div>
	<div class="productRight">
		<ul id="product1">
			<li class="feature3">feature 3</li>
			<li class="feature4">feature 5</li>
		</ul>
	</div>
	<br class="clb" />
</div>