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

Justin Obara obara.justin at gmail.com
Wed Feb 3 16:28:52 UTC 2010


Hi Harris,

I think you forgot to put the class "flc-reorderer-movable" on the div. Alternatively you could put lines 49 - 50 back in and replace 

movables: ".flc-imageReorderer-item"

with 

movables: ".photo_wrapper"

provided that the class "photo_wrapper" is only on the surrounding divs and not anywhere else.

So basically what you want to make sure is that the divs are the movable elements and nothing else.

Hope that will help.
Justin
On 2010-02-03, at 10:38 AM, Harris Wong wrote:

> I have updated the script now.  
> 
> After removing line 49-51, I can no longer drag the pictures.
> For the <a> tag, I tried with/without the class definitions, "flc-imageReorderer-item fl-imageReorderer-item", both didn't allow me to drag the pictures so I am going to leave those in the <a> tag.
> 
> thanks,
> harris
> 
> On 03/02/2010 10:25 AM, Justin Obara wrote:
>> 
>> 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/f6eec2d4/attachment.html>


More information about the Infusion-users mailing list