Drag div solo all'interno del box

z.cristiano

Utente Attivo
16 Giu 2007
145
0
16
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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;
            }
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
A me funziona,

prova a postare un po di codice
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Utente Attivo
16 Giu 2007
145
0
16
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;


}

}
 
Ultima modifica di un moderatore:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Utente Attivo
16 Giu 2007
145
0
16
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?
 
Discussioni simili
Autore Titolo Forum Risposte Data
Erzsébeth Drag div con class Javascript 9
Z Errore DRAG DIV Javascript 1
Z Ogni Drag DIV ha le sue dimensioni Javascript 2
L [Javascript] Drag and drop. Aggiornamento Campo Javascript 2
J Jquery ui drag drop move jQuery 0
G Piccolo problema con il Drag&Drop jQuery 0
S Selezionare files con drag and drop prima di upload PHP 0
A Drag and drop per ipad , questo sconosciuto... Javascript 1
R ordinamento immagini con drag and drop e memorizzazione db PHP 1
A copiare dati in mysql con drag & drop jQuery 0
P drag e drop disabilitato con jquery Javascript 1
max1974 grid e json con drag e drop jQuery 0
M Upload con drag and drop PHP 1
zighy memorizzare gli elementi di un drag n drop Javascript 4
zighy drag drop Javascript 11
D Drag and drop immagini non compatibile con FF Javascript 1
D Drag & drop HTML5. Problema con ie e chrome! HTML e CSS 1
renegade Vendo Agenda prenotazioni sistema Drag & Drop Offerte e Richieste di Lavoro e/o Collaborazione 0
WorldWideWeb Drag&Drop su TreeView Visual Basic 0
L java,oggetti grafici e drag and drop Java 2
J Drag and drop in vb Visual Basic 1
M Drag and Resize Javascript 0
N drag & drop Flash 1
E drag & drop Flash 1
M complesso drag&drop Flash 0
napuleone div centrato alla pagina posto sopra ai contenuti HTML e CSS 1
M Unire 2 funzioni per l'invio di un form e con l'apertura di un div Javascript 0
Cosina Nascondere div di default jQuery 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
S Visibilità div in PHP PHP 1
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
Cosina [PHP] Scrivere dati in un div specifico PHP 3
R [PHP] [Javascript] Link a DIV id di un' altra pagina PHP 4
trattorino [Javascript] onclick su piu div insieme Javascript 1
trattorino ritornare al div precedente jQuery 2
L [Javascript]Aprire div con click e chiuderlo con altro pulsante Javascript 2
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12

Discussioni simili