Se si desidera aggiungere qualcosa alla tua pagina che è un po' diverso da quello che la maggior parte delle persone sono su pagine Web, è possibile inserire un div "trascinabile". Un div è una sezione della tua pagina che può includere un raggruppamento di testo o immagini che è separato dal resto della pagina HTML. È possibile rendere un div che l'utente può trascinare. Questo può essere utile nelle pagine Web che consentono all'utente di personalizzare la sua esperienza.

Istruzioni

1

Accedere al server Web e aprire la pagina HTML che includerà trascinabili div.

2

Inserire questo codice tra < head > e < / head > Tag nella tua pagina:

< style type = "text/css" >

.dragplace () {

Priorità bassa: #FF0000;

Larghezza: 250px;

Altezza: 250px;

Posizione: assoluta;

Top: 50px;

sinistra: 50px;

z-indice: 5;

}

< / stile >

< script language = "javascript" >

var x;

var y;

elemento di var;

var being_dragged = false;

Function mouser(event) () {

if(Event.OffsetX || Event.OffsetY) () {

x=Event.OffsetX;

y=Event.OffsetY;

}

else {

x=Event.pageX;

y=Event.pageY;

}

document.getElementById('X').innerHTML = x + 'px';

document.getElementById('Y').innerHTML = y + 'px';

document.getElementById('X-coord').innerHTML = x + 'px';

document.getElementById('Y-coord').innerHTML = y + 'px';

if(being_dragged == true) () {

Document. getElementById (elemento).style.left = x + 'px';

Document. getElementById (elemento).style.top = y + 'px';

}

}

Function mouse_down(ele_name) () {

being_dragged = true;

elemento = ele_name;

Document. getElementById (elemento).style.cursor = 'Sposta';

}

Function mouse_up() () {

being_dragged = false;

Document. getElementById (elemento).style.top = y + 'px';

Document. getElementById (elemento).style.left = x + 'px';

Document. getElementById (elemento).style.cursor = 'auto';

}

< / script >

3

Clicca sulla sezione della pagina dove si desidera il trascinabili div a comparire. Questo deve essere nella sezione < body > della pagina.

4

Inserire il codice seguente:

< corpo class = "principale" onMouseMove="mouser(event);" >

< div id = "trascinatore" class = "dragplace" onMouseDown="mouse_down('dragger')" onMouseUp="mouse_up()" > trascinare questo < / div >

5

Sostituire "Trascinare questo" con il contenuto che si desidera venga visualizzato in div.

6

Pubblicare la pagina. L'utente sarà ora in grado di trascinare l'elemento div ovunque nella pagina pubblicata.