Loading ...
Sorry, an error occurred while loading the content.

Drap Drop Issues

Expand Messages
  • Musavir Khan
    Hi, I m kind of a newbie in this feild, can anyone help me out in couple issues that i have with the yui drag-drop library. first all, when drag an DDproxy
    Message 1 of 3 , Apr 5, 2006
    • 0 Attachment
      Hi,

      I'm kind of a newbie in this feild, can anyone help me out in couple issues that i have with the "yui drag-drop" library.

      first all, when drag an DDproxy object it is replaced with a bordered square, the problem that i'm facing with this is that, the bordered frame  is sized to the size of last proxy object rather than the size of the object being draged.

      second is, drag an element and drop it on other dragable object it they are swapped but most of the times they overlap with one another.
      can anyone tell me how to overcome this.

      thanks in advance.

      and here is the code the i'm using.


      function dragdropCustom(id, sGroup) {

          if (id) {
              this.init(id, sGroup);
              this.initFrame();
          }
          // Change the style of the frame to be a miniature representation of a
          // content channel
          var s = this.getDragEl().style;
              var ele=document.getElementById(id);
          s.height = ele.style.height;
          s.width = ele.style.width;
              s.display = "block";
              this.mode=this.POINT;
              this.dragThreshMet=200;
          // s.opacity = 0.66;
          // s.filter = "alpha(opacity=66)";

          // Specify that we do not want to resize the drag frame... we want to keep
          // the drag frame the size of our miniature content channel image
          this.resizeFrame = false;

          // Specify that we want the drag frame centered around the cursor rather
          // than relative to the click location so that the miniature content
          // channel appears in the location that was clicked
          this.centerFrame = true;
      }

      dragdropCustom.prototype = new YAHOO.util.DDProxy();

      dragdropCustom.prototype.onDragDrop = function(e, id) {
          var el;
          if ("string" == typeof id) {
              el = YAHOO.util.DDM.getElement(id);
          } else {
              el = YAHOO.util.DDM.getBestMatch(id).getEl();
          }
              YAHOO.util.DDM.swapNode(this.getEl(), el);
      };

      YAHOO.util.DDM.swapNode=function(n1,n2){
          var l=this.getPosX(n2);
          var t=this.getPosY(n2);
          if (n1.swapNode) {
              n1.swapNode(n2);
          } else {
              // the node reference order for the swap is a little tricky.
              var p = n2.parentNode;
              var s = n2.nextSibling;
              n1.parentNode.replaceChild(n2,n1);
              p.insertBefore(n1,s);
          }
          n2.style.left=this.startX;
          n2.style.top=this.startY;
          n1.style.left=l;
          n1.style.top=t;
      };


      --
      Musavir Ahmed Khan
    • Adam Moore
      Hi Musavir, ... The resizeFrame property controls this behavior. Change it to true if you want it to resize. ... The swap node function just switches the
      Message 2 of 3 , Apr 5, 2006
      • 0 Attachment
        Hi Musavir,

        On Wed, Apr 05, 2006 at 04:33:57PM +0530, Musavir Khan wrote:
        > Hi,
        >
        > I'm kind of a newbie in this feild, can anyone help me out in couple issues
        > that i have with the "yui drag-drop" library.
        >
        > first all, when drag an DDproxy object it is replaced with a bordered
        > square, the problem that i'm facing with this is that, the bordered frame
        > is sized to the size of last proxy object rather than the size of the object
        > being draged.

        The resizeFrame property controls this behavior. Change it to true if you
        want it to resize.

        > second is, drag an element and drop it on other dragable object it they are
        > swapped but most of the times they overlap with one another.
        > can anyone tell me how to overcome this.

        The swap node function just switches the location of the elements in the
        DOM. If they are not landing where you think they should, then it probably
        has to do with the markup or css. It may be that swap node is not what you
        need to do in your implemntation. What does the markup look like?


        -Adam
      • Musavir Khan
        ... Hi Adam, Thanks for replying , it solves one of the two problems that i had. about the mark, before that its like a demo sort of thing s mark is here, the
        Message 3 of 3 , Apr 5, 2006
        • 0 Attachment
          On 4/5/06, Adam Moore <adamoore@...> wrote:
          Hi Musavir,
          > second is, drag an element and drop it on other dragable object it they are
          > swapped but most of the times they overlap with one another.
          > can anyone tell me how to overcome this.

          The swap node function just switches the location of the elements in the
          DOM.  If they are not landing where you think they should, then it probably
          has to do with the markup or css.  It may be that swap node is not what you
          need to do in your implemntation.  What does the markup look like?


          -Adam

          Hi Adam,
                          Thanks for replying , it solves one of the two problems that i had. about the mark, before that its like a demo sort of thing's mark is here, the mark up has table under which two images are present which are the dragable elements. when i drag a element(image1) and  and drop it over image2 then this happen. thanks for replying earlier. Here is the mark up.


          <table class="ajaxBuilder_table" id
          ="ajaxBuilder_table"><tbody><tr><td
           colspan="1" rowspan="1" id=
          "cell0" class="acell"><img style=
          "width: 100px; height: 100px;" class="undefined" id="Image1" 
          name="Image1" alt="This is a sample image" 
          src="/ajaxdc/builder/images/sample.jpg"></td><td colspan=
          "1" rowspan="1" id="cell1" 
          class="acell"><img style="width: 100px; height: 100px;" 
          class="undefined" id="Image2" 
          name="Image2" alt="This is a sample image" src=
          "/ajaxdc/builder/images/sample.jpg" border="5"></td></tr
          ></tbody></table></body>


          --
          Musavir Ahmed Khan
        Your message has been successfully submitted and would be delivered to recipients shortly.