www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Drag and drop image over image and fix it on specific X & Y position

Hybrid View

  1. #1
    Join Date
    Apr 2013
    Posts
    5

    resolved [RESOLVED] Drag and drop image over image and fix it on specific X & Y position

    Hello guys,

    I'm in a dilemma regarding a Jquery script

    What I want to do: I have a couple of images that I want to put over another image using drag (and drop)
    The only thing is, that "the drop", needs to be on specific X Y coordinates.

    I have tried do make a code up and I finally managed to get one working, but the issue is that i won't stop the drop where I want it.

    Here's my code:

    Code:
    <script>
    <!--
    var ie=document.all;
    var nn6=document.getElementById&&!document.all;
    
    var isdrag=false;
    var x,y;
    var dobj;
    
    function movemouse(e) {
      if (isdrag)  {
        dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
        dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
        return false;
      }
    }
    
    function selectmouse(e) {
      var fobj       = nn6 ? e.target : event.srcElement;
      var topelement = nn6 ? "HTML" : "BODY";
    
      while (fobj.tagName != topelement && fobj.className != "dragme") {
        fobj = nn6 ? fobj.parentNode : fobj.parentElement;
      }
    
      if (fobj.className=="dragme"){
        isdrag = true;
        dobj = fobj;
        tx = parseInt(dobj.style.left+0);
        ty = parseInt(dobj.style.top+0);
        x = nn6 ? e.clientX : event.clientX;
        y = nn6 ? e.clientY : event.clientY;
        document.onmousemove=movemouse;
        return false;
      }
    }
    
    document.onmousedown=selectmouse;
    document.onmouseup=new Function("isdrag=false");
    
    //-->
    </script>
    I've been researching only for a possibility to define specific variables, and none of the functions work (or maybe I don't know how to adapt then...

    Something like this:
    Code:
    var offset = $(this).offset();
    var xPos = Math.abs(offset.left);
    var yPos = Math.abs(offset.top);
    Does anyone have any ideas ?!

    My best regards,
    Michael

  2. #2
    Join Date
    Apr 2013
    Posts
    21
    Can I see the html code?

  3. #3
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    i love scripts that check what browser your using on every mouse move, you never know when netscape is going to turn into IE in the middle of a drag...
    i'm suprised it works at all since it applies pixel style values without the "px" suffix...

    i would strongly suggest throwing out all that code and getting something modern that uses element.getBoundingClientRect() instead of feeble and fragile tree crawling.
    Last edited by rnd me; 04-23-2013 at 01:34 PM.

  4. #4
    Join Date
    Apr 2013
    Posts
    5
    Hello zoran404 & rnd me!

    Thank you for your replies.
    In the mean time I've overlooked the idea and decided to go with another option, which I'll posted in a new topic

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles