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

Harris Wong harris.wong at utoronto.ca
Fri Feb 5 16:15:29 UTC 2010


Found the problem, this is actually quite simple but I have never 
thought of it this way.

Instead of
.fl-reorderer-movable-selected {
border: 2px solid red;
}

It should be 1 layer down from the div.
.fl-reorderer-movable-selected a {
border: 2px solid red;
}

Hope it helps those that are stuck the same way...



- Harris
On 03/02/2010 12:41 PM, Harris Wong wrote:
> 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/20100205/55911354/attachment.html>


More information about the Infusion-users mailing list