jquery动态定位

Question

我有一个动态textarea嵌套在一个div内。 div可调整大小和拖动。 我为div创建了一个删除图标，但希望删除图标位于div的NE角落，并在div被调整大小时移动。

我已经创建div，文本区域和图标与此代码

function NewTextArea(id) 
    { 

    id=id+i; 
    var newdiv = document.createElement('div'); 
    newdiv.setAttribute('id', id); 
    newdiv.setAttribute('class', 'dragbox'); 
    newdiv.setAttribute('iterate',i); 
    newdiv.style.position = "relative"; 
    newdiv.style.top = p; 
    newdiv.style.left = p; 
    newdiv.style.cursor='move'; 
    newdiv.innerHTML = "</div><br><textarea id='"+i +"' onDblClick='editor1("+i+")' name='textarea["+i +"]' class='textarea1' style='position:absolute; top:10px;left:0px;overflow-y: auto;background-color:transparent;border: 2px dashed #000; '>some text here"+i+"</textarea>"; 
    newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='"+i+"' name='id["+i+"]'><br><input name='box_type["+i+"]' type='hidden' value='text'/>"; 
    newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='300' name='width["+i+"]' id='width"+i+"'><br><input type='hidden' value='300' name='height["+i+"]' id='height"+i+"'>";    
    newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='0' name='left["+i+"]' id='left"+i+"'><br><input type='hidden' value='0' name='top["+i+"]' id='top"+i+"'>"; 

    document.getElementById("frmMain").appendChild(newdiv); 

    var but=document.createElement('input'); 
    but.setAttribute('type','button'); 
    but.setAttribute('class','removebutton');  

    but.onclick=function(){ 
     if(confirm('Really delete?')) 
     { 
     document.getElementById("frmMain").removeChild(newdiv); 
     document.getElementById(id).removeChild(but); 
     document.getElementById(id).removeChild(newbr); 
     }  
    } 

    newbr=document.createElement('BR'); 
    document.getElementById(id).appendChild(newbr); 
    document.getElementById(id).appendChild(but); 



    $(function() 
    { 
     $("#"+i).resizable({autoHide:true}) 
     $("#"+id).hover(function() { 
      $("#"+i).css('border', '2px dashed #000');   
     }); 
     $("#"+id).mouseleave(function() { 
      $("#"+i).css('border', '0px dashed #000');   
     }); 
     $("#"+i).resizable(
      { 
       stop: function(event, ui) 
       { 
        var width = ui.size.width; 
        var height = ui.size.height; 
        // alert("width="+width+"height="+height); 
        ValProportions(width,height,ui.element.context.id);   
       } 
      }); 

     $("#"+id).draggable(
      { 
       stop: function(event, ui) 
       { 
        Stoppos = $(this).position(); 
        $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top); 
        // alert("left="+Stoppos.left+"top="+Stoppos.top); 
        ValPostion(Stoppos.left,Stoppos.top,$(this).attr('iterate')); 
       } 
      }); 
     $("#"+i).draggable({handle:"#handle"}); 
    }); 

    function ValProportions(defaultwidth, defaultheight,id) { 
     $('#width'+id).val(defaultwidth); 
     $('#height'+id).val(defaultheight); 
    } 

    function ValPostion(defaultleft,defaulttop,id) { 
     $('#left'+id).val(defaultleft); 
     $('#top'+id).val(defaulttop); 
    } 

    p=p+25;  
    i++; 

Answer 1

使用你的按钮的样式。

float:right 

将您的按钮放在div的右侧。 只要确保你得到的按钮作为div内的第一个元素。

Answer 2

添加样式

.dragbox { 
    position: relative; 
} 

.removebutton { 
    position: absolute; 
    top: 5px; 
    right: 5px; 
}