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

Justin Obara obara.justin at gmail.com
Wed Feb 3 15:25:48 UTC 2010


Hi Harris,

I just took a look at the example page you showed me and it doesn't look like it has been updated as you mentioned below. Do you have a working demo of that?

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

> Hi,
> 
> Just took line 49-51 out, and took out the reorder class from the div
> 
> <form action="" 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=/>
>             </a>
>         </div>
>         <div>...</div>
>         <!-- end loop -->
> </form>
> 
> After 7~8 drag and drops, they overlap again.  Interesting thing is when I take out the <div>, it seems to work perfectly fine.  
> 
> On 02/02/2010 11:00 AM, Justin Obara wrote:
>> 
>> 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/20100203/419e9859/attachment.html>


More information about the Infusion-users mailing list