Results 1 to 2 of 2

Thread: resizable/ draggable problems

  1. #1
    Ext User
    Join Date
    Apr 2009
    Posts
    49

    Default resizable/ draggable problems

    hi all,

    i'm new with ext so my apologies if my questions are pretty basic.

    i'm trying to make some kind of editor in Ext. doing this i dynamically create divs and make them resizable and draggable. this worked fine.
    now, to save the file for later use, i wanted to do this:
    Code:
    var x = $(divID).style.left;
    var y = $(divID).style.top;
    turns out those style elements are empty. then i started searching and encountered some new problems.
    first, if i resize an element and then try to drag it, it suddenly moves away from my cursor. to a bit more to the bottom right of my page.

    can anyone tell me what i'm doing wrong?

    also, (this has been asked a lot but i couldnt find i clear answer) how do i bind the draggable-option to the a certain div?(like you can do with constrainTo for resizing)
    in my case, i want it to constrain to workfield

    here is the code to create a div:
    Code:
    function divAdd(){
                    var newDiv = document.createElement("div");
                    var newPar = document.createElement("p");
                    var ID = $("workfield").getElementsByTagName("div").length;
                    
                    newDiv.id = ID;
                    newDiv.style.height = "30px";
                    newDiv.style.width = "100px";
                    newDiv.style.top = "0px";
                    newDiv.style.left = "0px";
                    newDiv.style.position = "absolute";
                    newDiv.style.fontStyle = "normal";
                    newDiv.style.fontWeight = "normal";
                    newDiv.style.color = "rgb(0, 0, 0)";
                    newDiv.style.textAlign="left";
                    newDiv.style.textDecoration="none";
                    newDiv.style.fontSize="12px";
                    newDiv.style.padding = "0px";
                    newDiv.style.verticalAlign = "top";
                    
                    newPar.id = "par"+ID;
                    newPar.style.textDecoration="none";
                    newPar.style.top = "0%";
                    newPar.style.height = "12px";
                    newPar.style.padding = "0px";
                    newPar.style.width = "100%";
                    newPar.style.marginBottom = "0px";
                    newPar.style.marginLeft = "0px";
                    newPar.style.marginRight = "0px";
                    newPar.style.marginTop = "0px";
                    newPar.style.position = "absolute";
                    newPar.innerHTML = "!!! NEW DIV !!!";
                    newPar.style.textAlign = "left";
                    
                    current.addDiv(newDiv);
                    
                    newDiv.appendChild(newPar);
                    $("workfield").appendChild(newDiv);
                    DynamicDivs.newElem(newDiv.id);
                }
    and this is the code to make it draggable:
    Code:
    var DynamicDivs = {
                    newElem :    function(id){
                        var Div = new Ext.Resizable(id, {
                            draggable        : true,
                            dynamic            : true,
                            handles            : "all",
                            minHeight        : 20,
                            minWidth        : 50,
                            wrap            : true,
                            constrainTo        : "workfield",
                        })
                    }
                   }
    i hope someone can help me.

  2. #2
    Ext User
    Join Date
    Apr 2009
    Posts
    49

    Default

    ok i got my code working using the resizepanel around the resizable divs.
    Code:
    var x = $(divID + "-rzwrap").style.left;
    var y = $(divID + "-rzwrap").style.top;
    i still don't know why it didn't work. still, if someone knows how i set boundaries to my div's draggable, i love to hear it.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •