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

Harris Wong harris.wong at utoronto.ca
Tue Feb 2 14:53:20 UTC 2010


Hello Justin,

I just tried this <div class="photo_wrapper" 
class="flc-reorderer-movable">, while the form and <a> classes remains 
as is; but the images still overlaps after a few drag and drop (keyboard 
works fine).  Please advice.


- Harris


On 02/02/2010 8:55 AM, Justin Obara wrote:
> 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