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

Harris Wong harris.wong at utoronto.ca
Wed Feb 3 17:41:34 UTC 2010


Thanks.  That helps a lot, but it recreated one of the problems I 
originally had, which was the original reason why I wrapped each <a> 
around a <div>.  Maybe you will have a better insight on why this is 
happening.

If you go back to the site, and click any images except the last one on 
each row, you can see the the images shift themselves down when it is 
under the "fl-reorderer-movable-selected".  In my CSS, on select, it has 
a 2px border around it.  I have traced it a bit and noticed that my 2px 
borders (just the top and bottom ones) are causing the problem (tried 
with 1px and still fails).  My solution was then to create a <div> 
wrapping around each <a> to redefine the height.  Since the <div> is now 
the movable object, the problem reappears.

Structure:
<div><a><img/></a></div>

Layout:
My <img> tag is of
width: 1+2+131+2+1 = 137
height: 1+2+98+2+1  = 104

My <a> tag is of
width: 2+140+2 = 144
height: 2+140+2 = 144

My <div> tag is of
width: 150
height: 150

The layouts are wrapped within each other, so I don't know why it's 
pushing the other <div> out once it's selected.  Does the reorderer 
reset the height somewhere else?  Any help is appreciated.


Thanks,
Harris


On 03/02/2010 11:28 AM, Justin Obara wrote:
> 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/d2c48363/attachment.html>


More information about the Infusion-users mailing list