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

Harris Wong harris.wong at utoronto.ca
Tue Feb 2 16:09:48 UTC 2010


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/20100202/bc0d4f57/attachment.html>


More information about the Infusion-users mailing list