troubleshooting Question

How To: Set z-index of clone with JQuery Draggable

Avatar of brianmfalls
brianmfallsFlag for United States of America asked on
CSSjQuery
3 Comments1 Solution2229 ViewsLast Modified:
You may view the code at: http://brianfalls.com/template4.cfm

Once items are dropped(placed), the clone for draggable elements disappears behind the placed elements.  I have tried a couple of tricks with z-index to prevent this to no avail.  Any ideas?  Thanks!
<!doctype html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>bf.c emTools</title>

<head>

	<script type="text/javascript" src="/ui/js/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.core.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.draggable.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.droppable.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.thumbHover.js"></script>
	<script type="text/javascript" src="/ui/js/png_fix.js"></script>
	
	<script type="text/javascript">
	
		$(function(){
		
			$("img[src*='_min']").thumbPopup({
				imgSmallFlag: "_min",
				imgLargeFlag: "_med"
			}).delay(800);
			
		});
		
		$(document).ready(function(){
		
////////////// for draggable elements ////////////// 
			$(".imageAsset").draggable({helper: 'clone', snap: '.drop', snapMode: 'inner'});
			
////////////// for droppable areas (primary area(s)) with dimensions of 315px x 470px (width x height) ////////////// 
			$(".drop315x470").droppable({
				accept: ".imageAsset",
				activeClass: 'droppable-active',
				hoverClass: 'droppable-hover',
				drop: function(ev, ui) {
				var mainContent="#".replace('#', ui.draggable.html().replace('thumbs/','').replace('_min','').replace('inline;','none;').replace('none;','block;'));
//				alert(mainContent);
				if ($(this).html() == "") {
					$(this).hide().append(mainContent).fadeIn(2000); 
				}
				else
					{
						$(this).empty().hide().append(mainContent).fadeIn(2000);
					}
				}
			});
			
////////////// for droppable areas (secondary area(s)) with dimensions of 315px x 225px (width x height) ////////////// 
			$(".drop315x225").droppable({
				accept: ".imageAsset",
				activeClass: 'droppable-active',
				hoverClass: 'droppable-hover',
				drop: function(ev, ui) {
				var content="#".replace('#', ui.draggable.html().replace('thumbs/','').replace('_min','').replace('inline','none').replace('none','block'));
//				alert(mainContent);
				if ($(this).html() == "") {
					$(this).hide().append(content).fadeIn(1500);
				}
				else
					{
						$(this).empty().hide().append(content).fadeIn(1500);
					}
				}
			});
			
		});

	</script>
	
	<style type="text/css">
	
		/*General*/
		body { font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
		.droppable-hover { outline: 2px dashed; }
		.clear { clear: both; }
		
		/* .png fix for early version of IE */
		img, div, input { behavior: url("/ui/js/png_fix.htc") }
		
		/* availableImages style - left side image library*/
		#availableImages { float: left; width: 250px; border: 1px solid #eee ; }
		#availableImages h4 { clear: both; margin: 0; padding: 0; }
		#availableImages hr { clear: both; display: block;  margin: 0 0 7px 0; color: #eee; background-color: #eee; border-color: #eee; }
		#availableImages ul { display: block; width: 250px; clear: both; margin: 0 0 7px 0; padding: 0; }
		#availableImages li { list-style: none; padding: 0; margin: 0; }
		#availableImages li div.primary { padding: 0; margin: 0; float: left; height: 85px; width: 55px; }
		#availableImages li div.secondary { padding: 0; margin: 0; float: left; height: 59px; width: 80px; }
		
		/* email content style - right side email content build tool*/
		#emailContent { float: left; width: 722px; }
		#emailContent .body {  background-image: url(ui/images/email_bg.png); width: 100%; height: 663px; }
		#emailContent .body .drop315x470 { width: 315px; height: 470px; float: left; border: 1px dashed #777; margin: 0; padding: 0; position: relative; top: 137px; left: 29px; }
		#emailContent .body .drop315x225 { width: 315px; height: 225px; float: left; border: 1px dashed #777; margin: 0; padding: 0; position: relative; top: 137px; left: 49px; }
		#emailContent .body .spacer { width: 315px; height: 17px; float: left; position: relative; top: 157px; left: 49px; }
		
	</style>

</head>

<body>
        
	<div id="availableImages">
		<h4>Primary Area Vignettes</h4>
		<!--- Primary Area Vignettes (315x470) --->
		<ul>
			<li><div class="primary imageAsset"><img src="/ui/images/thumbs/image6_min.jpg" /></div></li>
		</ul>
		<hr />
		<!--- Secondary Area Vignettes (315x225) --->
		<h4>Secondary Area Vignettes</h4>
		<ul>
			<li>
				<div class="secondary imageAsset">
					<div style=" display: none; ">
						<div style=" margin: 0; padding: 0; background: url(/ui/images/htmlImage1.jpg) no-repeat; width: 315px; height: 225px; border: none; " cellspacing="0" cellpadding="0">
							<input
								type="text"
								style=" width: 80px; background-color: #412412; font-family: Arial,Helvetica,sans-serif; color: #f0e0c7; font-size: 12px; border: none; font-weight: bold; position: relative; top: 169px; left: 202px; "
								maxlength="10"
								value="XX.XX.XXXX"
								name="[contentScriptFieldName]"
								id="expDate_0012569"
							/>
						</div>
					</div>
					<div style=" margin: 0 7px 0 0; padding: 0; float: left; width: 78px; display: inline; ">
						<img style=" display: block; " border="0" src="/ui/images/thumbs/htmlImage1_min.jpg" />
					</div>
				</div>
			</li>
			<li><div class="secondary imageAsset"><img src="/ui/images/thumbs/image1_min.jpg" /></div></li>
			<li><div class="secondary imageAsset"><a href=""><img style=" border: 0px; " src="/ui/images/thumbs/image2_min.png" /></a></div></li>
		</ul>
	</div>

	<div id="emailContent">
		<div class="body">
			<div class="drop315x470"></div>
			<div class="drop315x225"></div>
			<div class="spacer"></div>
			<div class="drop315x225"></div>
		</div>
	</div>

</body>

</html>

Open in new window

ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros