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

Harris Wong harris.wong at utoronto.ca
Wed Feb 3 15:38:51 UTC 2010


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/816c6dd3/attachment.html>


More information about the Infusion-users mailing list