Changes between Initial Version and Version 3 of Ticket #8238


Ignore:
Timestamp:
Apr 6, 2012, 7:09:57 AM (7 years ago)
Author:
Scott González
Comment:

Images ( and form controls) need to be wrapped in a div in order to be made resized. Make the image resizable, then make its parent draggable and set its zIndex. See http://jsfiddle.net/GZAwE/12/

Legend:

Unmodified
Added
Removed
Modified
  • Ticket #8238

    • Property Owner set to Davewp196
    • Property Summary changed from zindex is not respected. to Resizable: auto-wrapped elements should inherit zindex
  • Ticket #8238 – Description

    initial v3  
    22
    33Use case: As an editor, I want to be able to drag and resize an image within the constraints of an outer-division, using the mouse, so that I can correctly and easily see where to position an image.
    4 
    5 Note that I've made the component draggable in the function extract below, and this works OK, and omitting it makes no difference to the problem.
    6 
    7 ----- Code ----
    8 
    9 <div style="height:198px;width:940px;border-style: solid;border-width: 1px;border-color: black; display:inline-block">
    10    <div id="esee_header_banner" style="display:inline-block; position:relative; vertical-align:middle;height:198px;width:940px">
    11     <img src="http://localhost/4 windows.png" style="z-index:99;position:absolute;top:0px;left:0px" />
    12     <img id="Logo" src="http://localhost/logo.png" style="z-index:1001;position:absolute;top:0px;left:0px;height:176px;width:155px" />
    13 </div>
    14 <input type="hidden" id="logo_top" value="0"/>
    15 <input type="hidden" id="logo_left" value="0"/>
    16 <input type="hidden" id="logo_height" value="176"/>
    17 <input type="hidden" id="logo_width" value="155"/>
    18 <script type="text/javascript">Enable_Logo_Movement("Logo","logo_top","logo_left","logo_height","logo_width");</script></div>
    19 
    20 -----
    21 
    22 Contents of Enable_Logo_Movement function
    23 
    24 var IMG,TOP,LEFT,HEIGHT,WIDTH;
    25 function Enable_Logo_Movement(img,top,left,height,width){
    26     IMG=document.getElementById(img);
    27     if (IMG!=null){
    28         TOP=document.getElementById(top);
    29         LEFT=document.getElementById(left);
    30         HEIGHT=document.getElementById(height);
    31         WIDTH=document.getElementById(width);
    32         IMG.style.effectAllowed="move";
    33         jQuery(document).ready(function(){
    34             var img="#"+IMG.id;
    35             jQuery(img).draggable({
    36                 containment:'parent',
    37                 stop:function(event,ui){
    38                     LEFT.value=ui.position.left;
    39                     TOP.value=ui.position.top;
    40                 }
    41             });
    42             jQuery(img).resizable({
    43                 containment:'parent',
    44                 stop:function(event,ui){
    45                     HEIGHT.value=ui.size.height;
    46                     WIDTH.value=ui.size.width;
    47                 }
    48             });
    49         });
    50     };
    51 }