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

Justin Obara obara.justin at gmail.com
Tue Feb 2 15:29:10 UTC 2010


Hi Harris, 

Do you think you could send along your initialization code for the image reorder, and if possible a link to where this is running?

Thanks
Justin
On 2010-02-02, at 10:02 AM, Harris Wong wrote:

> Correction,
> <div class="flc-reorderer-movable photo_wrapper">
> 
> 
> On 02/02/2010 9:53 AM, Harris Wong wrote:
>> 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
>> 
>> _______________________________________________
>> Infusion-users mailing list
>> Infusion-users at fluidproject.org
>> http://fluidproject.org/mailman/listinfo/infusion-users
> 




More information about the Infusion-users mailing list