Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Help with Drag/Drop script

  1. #1
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default Help with Drag/Drop script

    Okay.

    I know there's a more complicating way to do this, but this is the way I do a drag and drop script:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function move(id) {
    var offsetx = 100
    var offsety = 100
    document.onmousemove=function() {
    id.style.left=event.clientX-offsetx+"px"
    id.style.top=event.clientY-offsety+"px"
    return false
    }
    id.onmouseup=function(){
    document.onmousemove=null
    id.style.left=event.clientX-offsetx+"px"
    id.style.top=event.clientY-offsety+"px"
    }
    }
    </script>
    <style type="text/css">
    .menu{
    position:absolute;
    width:200px;
    height:200px;
    padding:2px;
    border:1px solid black;
    top:0px;
    left:0px;
    background:#F0F0F0
    }
    </style>
    <body>
    <div class="menu" onmousedown="move(this)">test</div>
    </body>
    </html>
    My problem is that it won't work in Mozilla, and help will be appreciated.
    - Mike

  2. #2
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Someone help.. This is almost indecent of you.. (just joking) But seriously, I would like some help on this.
    - Mike

  3. #3
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Code:
    <script type="text/javascript">
    function move(el) {
      var offsetx = 100,
        offsety = 100;
      document.onmousemove = function(e) {
        var ev = e || window.event;
        el.style.left = ev.clientX - offsetx + "px";
        el.style.top = ev.clientY - offsety + "px";
        return false;
      };
      el.onmouseup = function(e) {
        var ev = e || window.event;
        document.onmousemove = null;
        el.style.left = ev.clientX - offsetx + "px";
        el.style.top = ev.clientY - offsety + "px";
      };
    }
    </script>
    I don't like the way you've designed that script, though. Every time move() is called, those two functions are created all over again.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  4. #4
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Thanks, it works great.
    - Mike

  5. #5
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    But I would like the offset to be where your mouse is in the box itself. It drags from the middle currently, but as I said, I would like it to be wherever the cursor is, in relevance to the box.

    Thanks in advance.
    - Mike

  6. #6
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Code:
    function Point2D(x, y) {
      this.x = x;
      this.y = y;
    };
    
    function Oblong2D(l, t, r, b) {
      this.left = l;
      this.top = t;
      this.right = r;
      this.bottom = b;
      this.width = this.right - this.left;
      this.height = this.bottom - this.top;
      this.relCentre = new Point2D(this.width / 2, this.height / 2);
      this.absCentre = new Point2D(this.left + this.relCentre.x, this.top + this.relCentre.y);
    };
    
    function getBoundingBox(obj) {
      var curleft = 0,
        oObj = obj;
      if (obj.offsetParent)
        while (obj.offsetParent) {
          curleft += obj.offsetLeft;
          obj = obj.offsetParent;
        }
      else if (obj.x) curleft += obj.x;
    
      obj = oObj;
    
      var curtop = 0;
      if (obj.offsetParent)
        while (obj.offsetParent) {
          curtop += obj.offsetTop;
          obj = obj.offsetParent;
        }
      else if (obj.y) curtop += obj.y;
    
      var curright = curleft + oObj.offsetWidth,
        curbottom = curtop + oObj.offsetHeight;
    
      return new Oblong2D(curleft, curtop, curright, curbottom);
    }
    
    
    function move(el) {
      var elBounds = getBoundingBox(el);
      document.onmousemove = function(e) {
        var ev = e || window.event;
        el.style.position = "absolute";
        el.style.left = (ev.pageX || ev.clientX + (window.document.body.scrollLeft || window.document.documentElement.scrollLeft)) - elBounds.relCentre.x + "px";
        el.style.top = (ev.pageY || ev.clientY + (window.document.body.scrollTop || window.document.documentElement.scrollTop)) - elBounds.relCentre.y + "px";
        return false;
      };
      el.onmouseup = function(e) {
        var ev = e || window.event;
        document.onmousemove = null;
        this.style.left = (ev.pageX || ev.clientX + (window.document.body.scrollLeft || window.document.documentElement.scrollLeft)) - elBounds.relCentre.x + "px";
        this.style.top = (ev.pageY || ev.clientY + (window.document.body.scrollTop || window.document.documentElement.scrollTop)) - elBounds.relCentre.y + "px";
      };
    }
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  7. #7
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    It still moves the box to the middle?? I'll try to work it out in the meantime though.
    - Mike

  8. #8
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Okay, I've solved it. I subtracted the id's left from event.clientX to get the offsetx, and the same for offsety:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function move(id,e) {
    var ev = e || window.event
    var offsetx = ev.clientX-id.style.left.substring(0,id.style.left.length-2)
    var offsety = ev.clientY-id.style.top.substring(0,id.style.top.length-2)
    document.onmousemove = function(e) {
    var ev = e || window.event
    id.style.left = ev.clientX-offsetx
    id.style.top = ev.clientY-offsety
    return false
    }
    id.onmouseup = function(e) {
    var ev = e || window.event
    document.onmousemove = null
    id.style.left = ev.clientX-offsetx
    id.style.top = ev.clientY-offsety
    }
    }
    </script>
    <style type="text/css">
    .block {
    position:absolute;
    width:200px;
    height:200px;
    padding:2px;
    border:1px solid black;
    top:0;
    left:0;
    filter:alpha(Opacity:70);
    background:#F0F0F0
    }
    .text {
    float:left
    }
    .mover {
    float:right;
    }
    </style>
    </head>
    <body>
    <div class="block" onmousedown="move(this)">
    </div>
    </div>
    </body>
    </html>
    - Mike

  9. #9
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Whoops, yeah.

    You really want to compensate for scroll offsets in there somewhere though.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  10. #10
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Oh yeah, I forgot about that
    - Mike

Bookmarks

Posting Permissions

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