dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: Drag div only on box

  1. #1
    Join Date
    Aug 2012
    Posts
    2

    Drag div only on box

    Hello..
    I have create this code

    function $(id)
    {

    return document.getElementById(id);

    }

    var _startX = 0;

    var _startY = 0;

    var _offsetX = 0;

    var _offsetY = 0;

    var _dragElement;

    var _oldZIndex = 0;

    var _debug = $('debug');

    InitDragDrop();


    function InitDragDrop()
    {

    document.onmousedown = OnMouseDown;

    document.onmouseup = OnMouseUp;

    }

    function OnMouseDown(e)
    {

    if(e == null)

    e = window.event;

    var target = e.target != null ? e.target : e.srcElement;

    if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'testo_immagine_drag')
    {

    _startX = e.clientX;

    _startY = e.clientY;

    _offsetX = ExtractNumber(target.style.left);

    _offsetY = ExtractNumber(target.style.top);

    _oldZIndex = target.style.zIndex;

    target.style.zIndex = 10000;

    _dragElement = target;

    document.onmousemove = OnMouseMove;

    document.body.focus();

    document.onselectstart = function () { return false; };

    target.ondragstart = function() { return false; };

    return false;

    }

    }



    function ExtractNumber(value)
    {

    var n = parseInt(value);

    return n == null || isNaN(n) ? 0 : n;

    }



    function OnMouseMove(e)
    {

    if(e == null)

    var e = window.event;

    var target = e.target != null ? e.target: e.srcElement;

    var elem = target.getAttribute("id");

    _dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';

    _dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';

    if(document.getElementById("misure"+ elem))
    {

    document.getElementById("misure"+ elem).value = _dragElement.style.left +"||"+ _dragElement.style.top;

    }


    }



    function OnMouseUp(e)
    {

    if(_dragElement != null)
    {

    _dragElement.style.zIndex = _oldZIndex;

    document.onmousemove = null;

    document.onselectstart = null;

    _dragElement.ondragstart = null;

    _dragElement = null;


    }

    }

    How is the code that the div can drag only on the box? Nor on area of browser
    THe name class of div is "testo_immagine_drag"

  2. #2
    Join Date
    Oct 2006
    Posts
    939
    Its the line here-
    if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'testo_immagine_drag')

    Everything else is excluded

  3. #3
    Join Date
    Aug 2012
    Posts
    2
    Ah, help me..
    How is the specific code? What I write?

  4. #4
    Join Date
    Oct 2006
    Posts
    939
    Quote Originally Posted by z.cristiano View Post
    Ah, help me..
    How is the specific code? What I write?
    Try this simple, then you can take it anywhere

    if ((e.button == 1 && window.event != null || e.button == 0) && target.className != 'testo_immagine_drag')

  5. #5
    Join Date
    Aug 2012
    Posts
    15
    Hi, I don't know if you code is for a webpage or a webapp, anyway if you are not familiar with jquery you can have a look at it, it is pretty straight forward.

    You need to use Jquery and Jquery UI and then calling an interaction called draggable it is very simple to achieve what you want.

    You can have a look at Jquery UI.

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