Drag div solo all'interno del box

z.cristiano · 2012-08-03T09:27:10+0200

Salve a tutti...
HO creato l'applicazione di drag div dentro il box di 400 x 400 pixel però funziona trascinare in tutto lo schermo del browser, ma vorrei che il div è trascinabile fino all'interno del box di 400x400 pix senza scroll e senza andare fuori.

Come si fa?

criric · 2012-08-03T10:54:39+0200

Ciao,
Potresti provare a racchiudere il tutto dentro un altro div con queste regole css:

Codice:

div#contenitore {
                border: 1px solid gray;
                width:600px;
                height:600px;
                overflow:hidden;
            }

z.cristiano · 2012-08-03T11:26:46+0200

Provato, non funziona...
Non è CSS ma il javascript..

criric · 2012-08-03T15:28:21+0200

A me funziona,

prova a postare un po di codice

criric · 2012-08-04T16:29:14+0200

Credo tu abbia in parte ragione!

Funziona con Firefox Chrome ma non con Internet Explorer ( chissa come mai )

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Draggable</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
        <script type="text/javascript">            
            $(document).ready(function(){
                $('#drag').draggable();
            });
        </script>
        <style>
            #html {
                text-align: center;
            }
            #contenitore {
                margin:auto;
                margin-top: 50px;
                width:500px;
                height:400px;
                border:2px solid red;
                background-color: #e1e1e1;
                overflow: hidden;
            }
            #drag {
                width:60px;
                height:60px;
                cursor:move;
                background-color: red;
                border:2px solid black;
            }
        </style>
    </head>
    <body>
        <div id="contenitore">
            <div id="drag"></div>
        </div>
    </body>
</html>

z.cristiano · 2012-08-05T14:15:57+0200

Non c'è un codice specifico?
Guarda sotto questo è il codice di DRAG e volevo sapere se da qualche parte devo aggiungere un codice che permette di fare un drag solo all'interno del box e non tutta la finestra dei browser.

Codice:

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;


}

}

criric · 2012-08-05T14:43:51+0200

no non mi dice niente.

come fai a farlo partire?

Cerca di formattare il codice che posti, ultime icone seconda riga sulla barra di formattazione

z.cristiano · 2012-08-05T15:21:39+0200

criric ha scritto:
no non mi dice niente.

come fai a farlo partire?

Cerca di formattare il codice che posti, ultime icone seconda riga sulla barra di formattazione

Beh questo codice javascript funziona alla grande, solo che quando trascino, posso trascinare in tutta la finestra del browser, quindi proprio non c'è modo che il div possa trascinare fino al formato del box interno 400x400 pixel?

Cerca

Cerca

Drag div solo all'interno del box

z.cristiano

Utente Attivo

criric

Super Moderatore

z.cristiano

Utente Attivo

criric

Super Moderatore

criric

Super Moderatore

z.cristiano

Utente Attivo

criric

Super Moderatore

z.cristiano

Utente Attivo

Discussioni simili