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

Justin Obara obara.justin at gmail.com
Tue Feb 2 16:00:34 UTC 2010


Hello,

I think it may have to do with the initialization code in your imageReorderer.js file

    demo.formBasedImageReorderer = function () {
48 var reorderer = fluid.reorderImages("#reorder-images-form", {
49     selectors: {
50         movables: ".flc-imageReorderer-item"
51     },
52     listeners: {
53        afterMove: afterMoveListener
54     }
55 });
56 }; 

So you are specifying that the class flc-imageReorderer-item is the movables selector, which is still on the <a>

Since you are now using the default selector you can remove lines 49 to 51 and should be able to remove flc-imageReorder-item from each <a>.

Hope this helps
Justin

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

> Sure, attached.
> 
> http://142.150.154.167/atutor155/ATutor_163
> un/pw: 
> 
> Original -> [photo_album] -> PEI Trip -> [organize_photos]
> Then drag and drop repeatedly until you see them overlap.
> 
> 
> Thanks!
> 
> On 02/02/2010 10:29 AM, Justin Obara wrote:
>> 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
>>>>       
>>>     
>>   
> 
> <pa_organize_photos.tmpl.php><edit_photos.php><imageReorderer.js>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://fluidproject.org/pipermail/infusion-users/attachments/20100202/3792ced1/attachment.html>


More information about the Infusion-users mailing list