[Infusion-users] Image Reorderer overlaps after drag and drop

Justin Obara obara.justin at gmail.com
Tue Feb 2 13:55:28 UTC 2010


Hi Harris,

A quick thought. I think you will have to make the <div> the reorderable element; assuming that the <a> still is. Otherwise when you reorder them, the <a> will probably be ripped out of the <div>; which I think is what your example below shows.

Please let me know if this helps. I've only taken a quick look so I might have missed something.

Thanks
Justin

On 2010-02-01, at 4:36 PM, Harris Wong wrote:

> Hi all,
> 
> I have experienced a consistent photo overlapping problem.  I am not too sure if this is caused by my code or something in the core since I can't reproduce it on the demo.
> 
> The problem occurs when I wrap my <a><img></a> in a <div>, then reordering it will somehow add an extra div in the DOM.
> As follow:
> 
> my code:<form id="reorder-images-form" class="flc-imageReorderer fl-imageReorderer fl-reorderer-horizontalLayout" style="float:left;">
> 
> 	<!-- loop through this -->
> 	<div  class="photo_wrapper">
> 		<a  class="flc-imageReorderer-item fl-imageReorderer-item photo_frame">
> 		<img  src=""title=""alt=""/>
> 		</a>
> 	</div>
> 	<div>...</div>
> </form>
> 
> CSS:
> div.photo_wrapper{
> 	height: 150px;
> 	width: 150px;
> 	float: left;
> }
> 
> 
> After dragging a photo on top to another:
> <form ...>
> <div  class="photo_wrapper">
> 			<a  aria-labelledby="fluid-id-8"aria-dropeffect="none"aria-grabbed="false"tabindex="-1"aria-disabled="false"aria-selected="false"role="img"class="flc-imageReorderer-item fl-imageReorderer-item photo_frame ui-draggable fl-reorderer-movable-default">
> 				<img  role="presentation"src="mods/photos/get_photo.php?aid=1&pid=28&ph=cee044e0287fded6c497e23c67b5036e330743e9"title=""alt="">
> 				<input  name="image_28"value="9"type="hidden">
> 			</a><a  aria-labelledby="fluid-id-17"aria-dropeffect="none"aria-grabbed="false"tabindex="-1"aria-disabled="false"aria-selected="false"role="img"class="flc-imageReorderer-item fl-imageReorderer-item photo_frame ui-draggable fl-reorderer-movable-default">
> 				<img  role="presentation"src="mods/photos/get_photo.php?aid=1&pid=11&ph=f55478b388fef45c79a142a26be34c9e5ebc5fd0"title=""alt="">
> 				<input  name="image_11"value="10"type="hidden">
> 			</a>
> 		</div>
> ...
> </form>
> 
> 
> Is this problem caused by wrapping the <a ckass="flc-imageReorderer-item fl-imageReorderer-item"> around an extra <div>?
> 
> 
> Thanks,
> 
> Harris
> _______________________________________________
> Infusion-users mailing list
> Infusion-users at fluidproject.org
> http://fluidproject.org/mailman/listinfo/infusion-users




More information about the Infusion-users mailing list