[RISOLTO]Div Draggable

wolverinelogan

SCRIVI

[RISOLTO]Div Draggable postato il 24/09/2015 22:33:05 nel forum programmazione, gdrcd, open source, hosting e modificato da wolverinelogan il 06/10/2015 20:35:12

Buonasera ragazzi,

sono nuovamente incappato in un dilemma mistico.
Stavo tentando di rendere draggable dei div con questo codice


<script type="text/javascript">

//Inizializzo l'oggetto da Spostare
oggetto = null;

//Le due variabili che archiviano la posizione cursore mouse
mouse_x = 0;
mouse_y = 0;

//Le due variabili che archiviano la posizione dell'elemento
ele_x = 0;
ele_y = 0;

//Collega le due funzioni muovi e ferma
function inizializzaMov(){
document.onmousemove = muovi;
document.onmouseup = ferma;
}

//Distrugge l'oggetto quando siamo fermi
function ferma(){
oggetto = null;
}

//Funzione principale, che è responsabile dello spostamento dell'elemento
function muovi(e){
mouse_x = document.all ? window.event.clientX : e.pageX;
mouse_y = document.all ? window.event.clientY : e.pageY;
if(oggetto != null)
{
oggetto.style.left = (mouse_x - ele_x) + "px";
oggetto.style.top = (mouse_y - ele_y) + "px";
}
}

//Viene richiamata quando comincio a spostare l'oggetto
function muoviOggetto(ele){
//memorizzo i valori dell'elemento che deve essere spostato
oggetto = ele;
ele_x = mouse_x - oggetto.offsetLeft;
ele_y = mouse_y - oggetto.offsetTop;


}

</script>


poi il tag body:

<body onload="inizializzaMov()">


e infine nel div interessato l'evento:

onmousedown='muoviOggetto(this);



Funzionare funziona. I div si spostano senza problemi. Il problema è un'altro. Fino a che sposto 2 o 3 div a posto, quando ne sposto un quarto o un quinto, iniziano a succeder cose strane, ad esempio si bloccano, oppure mi selezionano altro testo ma non si spostano.

Sostanzialmente io ho una mappa. Cliccando su un luogo si apre un popover che è creato da un div al quale viene applicato per l'appunto questo evento draggabile.

sino a che apro 2 o 3 popover tutto normale, al quarto o quinto iniziano a non richiudersi, o a non spostarsi più. Proprio non capisco che sbaglio T.T

se avete idee fatemi sapere, grazie, un saluto a tutti

Luciano

AlterEgoAlterEgo ↗
Scopri AlterEgo GdR: un incredibile universo narrativo in stile medievale fantasy che cresce, muta e vive giorno dopo giorno grazie ai suoi giocatori!

quota

Pagine → 1 

breaker

SCRIVI

24/09/2015 22:55:07

Questo potrebbe risolverti la vita ed aprirti un mondo

https://jqueryui.com/draggable/ ↗

"Release your mind´s eye and we make your dreams come true"

quota

wolverinelogan

SCRIVI

24/09/2015 23:00:48 e modificato da wolverinelogan il 24/09/2015 23:23:22

sto usando bootstrap 3.0

non riesco a capire se va in conflitto o meno perchè onestamente carico i plugin per il jquery draggable metto il java e il codice ai div, ma nulla. Non mi funziona. Per questo ho tentato un codice alternativo

ADD: in sostanza se inserito all'interno di un popover di bootstrap, non si muove. Il div che racchiude il tutto si posiziona al di sotto del div che dovrebbe esserne il contenuto e non se move

EnlistedEnlisted ↗
Guida la tua squadra di soldati in combattimenti su larga scala, con fanteria, veicoli corazzati e aerei della IIa Guerra Mondiale!

quota

breaker

SCRIVI

25/09/2015 08:21:04

Qualcosa tipo questo?
http://jsfiddle.net/vacidesign/qaoxfptL/ ↗
http://www.bootply.com/dUQiGMggWO ↗

"Release your mind´s eye and we make your dreams come true"

quota

wolverinelogan

SCRIVI

25/09/2015 19:27:10

Si una cosa così. credo di aver capito il problema, forse sbagliavo ad applicare i css al div modal. Appena riesco provo e ti faccio sapere, grazie! :)

RAID Shadow LegendsRAID Shadow Legends ↗
Plasma i tuoi eroi fino a farli diventare vere e proprie armi viventi e assembla i più epici gruppi d'assalto mai visti finora!

quota

wolverinelogan

SCRIVI

28/09/2015 18:26:14 e modificato da wolverinelogan il 28/09/2015 19:24:02

No, sono sempre in crisi, dunque a me deve aprirsi, la finestra modale, esattamente come mi hai fatto vedere nel primo link, al suo interno vi è una mappa con i luoghi cliccabili. Cliccando sul luogo si apre il popover, che a quanto ho visto con botstrap è definito da questo codice



<!-- popover -->

$(function () {
$('[data-toggle="popover"]').popover()


})






<!-- arco -->
$(document).ready(function(){
$('.prova').popover({
content: "<div id='box' class='alert alert-dismissable' style='position:relative;z-index: 5;><button type='button' style='right: -225px; top: 40px;' class='close' data-dismiss='alert'></button><div style='margin: 5px 0px 0px -15px; width: 540px;height: 227px;'><div style='float: right; height: 225px; width: 320px; background-image: url(img/chat/defoult1.png); background-repeat: no-repeat; margin-left: 0px; border-left-width: 0px; padding-left: 0px;'><div style='text-align: center; padding: 0px 60px 0px 0px; height: 65px; font-family: Arial,serif; font-size: 15px; color: rgb(255, 255, 255); font-weight: bold; text-shadow: 2px 2px 2px rgb(0, 0, 0); letter-spacing: 1px; width: 310px; float: right; border-top-width: 0px; margin-top: -5px;'><a href='#'><img src='img/bt/bt.png' style='margin-top: -15px;' /></a></div><div style='float:right;width:310px;font-size:11px; padding-right:30px;text-align:left;height:145px;margin-top: -18px;overflow: auto'>TESTO A PIACERE CONTENUTO NEL POPOVER</div></div></div><div style='background-image: url(img/chat/a.png); background-repeat: no-repeat; float: left; width: 220px; height: 223px; padding: 0px 0px 0px 10px; margin-top: 0px;'></div><div style='clear:both;text-align:center;padding: 10 0 0 0;'></div></div>",
trigger: "click",
html: "true",
placement: "left",
delay: 300});
});



e il codice html che richiama questo popover è



<img src="img/map_46.png" width="41" height="45" class="prova">



In sostanza è il popover che si apre all'interno della finestra modale che deve esser draggabile, ma continuo a batter capoccia inutilmente.

All'esterno della finestra modale non mì da problemi ma se provo a draggare un div all'interno della finestra modale non ne vuole sapere.

ADD:

Credo che la soluzione sia rendere draggabile il popover unendo questi due codici potrebbe essere??


$(function () {
$('[data-toggle="popover"]').popover()

$("#box").draggable({cursor: 'pointer'});

EnlistedEnlisted ↗
Guida la tua squadra di soldati in combattimenti su larga scala, con fanteria, veicoli corazzati e aerei della IIa Guerra Mondiale!

quota

wolverinelogan

SCRIVI

06/10/2015 20:34:54

Risolto con questo script




$(function() {
$('body').on('mousedown', '.div', function() {
$(this).addClass('draggable').parents().on('mousemove', function(e) {
$('.draggable').offset({
top: e.pageY - $('.draggable').outerHeight() / 2,
left: e.pageX - $('.draggable').outerWidth() / 2
}).on('mouseup', function() {
$(this).removeClass('draggable');
});
});
e.preventDefault();
}).on('mouseup', function() {
$('.draggable').removeClass('draggable');
});
});


Storie di AgarthiStorie di Agarthi ↗
Un Varco si apre davanti a te, un mondo tra i mondi è a portata di mano. Lasciati alle spalle le certezze, inizia l'avventura!

quota

Discussione seguita da › wolverinelogan

Pagine → 1 

Rispondi alla Discussione Segui Discussione Inoltra Discussione Forum Programmazione, GDRCD, Open Source, Hosting Elenco Forum

Articoli, Interviste e altre Risorse!

World of Warship
World of Warship
MMO gratuito con frenetiche battaglie navali ambientate nel ventesimo secolo. Salpa con la tua nave ed affronta i nemici!
Legacy of Magic
Legacy of Magic
Intervista a Vincenzo Verduci di Legacy of Magic che ci spiega anche la fine di Lande di Shannara
Awakening New York
Awakening New York
Intervista al gestore del GdR moderno Awakening New York. Vivi nella Grande Mela!
Imparare il Giapponese
Imparare il Giapponese
Apprendere la lingua giapponese con i videogiochi. Una ricerca sul campo.. scarica la tesi!

Pubblicità

Ultime dal Portale

gdrrank I dati del generatore di rank sono stati aggiornati!

recensione velglarn ha recensito Age of Crystals

CRSED: F.O.A.D. CRSED: F.O.A.D. → Brutale sparatutto MMO in cui vince l'ultimo giocatore che resta in vita! Il giocatore sarà accompagnato da armi realistiche e magie!

forum anneth ha risposto alla discussione: [GDRCD 5.6] - Pacchetto Wapp 2.0

news Black Sails Chronicles: ON - Le Danzatrici del Rum

risposta Il gestore di Black Sails Chronicles ha risposto alla recensione di lalalansia

news Storie di Esperia: La realtà lacerata: inizio evento a tema Halloween

War Thunder War Thunder → Aviazione, veicoli corazzati e flotte militari della seconda guerra mondiale. Parteciperai a tutte le principali battaglie!

forum lubeck ha aperto una nuova discussione: [GDRCD 5.6] - Pacchetto Wapp 2.0

news Lubecca: [CODICE] - Migliorie Grafiche I

forum mikee ha risposto alla discussione: Gioco investigativo e politico

news Piume Nere: Informazioni per i Partecipanti alla Cronaca Alpha

Hero Wars Hero Wars → Costruisci la tua squadra di eroi leggendari e domina il campo di battaglia! Strategia, tattica e potenza si scontrano in questo RPG ricco di azione!

news New Orleans: [on] Times - Trick or Treat

news Dissendium Draconis: Invasione di non-morti, Muore la Ministro

recensione lalalansia ha recensito Black Sails Chronicles

recensione napple ha recensito Fengard

Storie di Agarthi Storie di Agarthi → Un Varco si apre davanti a te, un mondo tra i mondi è a portata di mano. Lasciati alle spalle le certezze, inizia l'avventura!

Pubblicità

Articoli

Gdr by Chat Requiem Gdr by Chat Requiem - Nel mondo dei giochi on line il gdr by chat è ormai un pezzo da museo?

Abitudini di Spesa Abitudini di Spesa - Infografica sulle abitudini di spesa dei giocatori di MMO online

Scarica GDR DBless Scarica GDR DBless - Scarica gratuitamente GDR DBless... open source per gdr online senza l'utilizzo di un database

Giochi su Camelot Giochi su Camelot - Lista dei giochi ispirati al mondo dei Cavalieri della Tavola Rotonda, Re Artù, Merlino ecc.

One Piece World One Piece World - Intervista al gestore del gdr play by chat One Piece World!

Background Background - 100 Cose da sapere sul Background del Personaggio!

GdR su ForumFree GdR su ForumFree - Lista dei giochi di ruolo play by forum sul circuito ForumFree