[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

Lineage IILineage II ↗
Entra in uno sconfinato mondo fantasy dominato da razze in contrasto tra loro. Scatena i tuoi poteri in uno dei Mmo più famosi al mondo!

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

Sea of ConquestSea of Conquest ↗
Vivi un'avventura tra i mari! Dal cuore del Mare del Diavolo, un paradiso piratesco brulicante di magia, tesori e avventure, salperai verso l'ignoto!

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! :)

World of WarshipWorld of Warship ↗
MMO gratuito con frenetiche battaglie navali ambientate nel ventesimo secolo. Salpa con la tua nave ed affronta i nemici!

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'});

Pandora Upside Down High SchoolPandora Upside Down High School ↗
La prima scuola per sovrannaturali al mondo vi attende! Scoprite il vostro cammino Ancestrale relazionandovi con i compagni e le attività dei club

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');
});
});


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

quota

Discussione seguita da › wolverinelogan

Pagine → 1 

Rispondi alla Discussione Aggiungi ai Preferiti Inoltra Discussione Forum Programmazione, GDRCD, Open Source, Hosting Elenco Forum

Articoli, Recensioni, Interviste e altre Risorse!

Il genere in Gioco
Il genere in Gioco
Il genere in gioco: Uno sguardo ludico-critico verso la consapevolezza degli stereotipi
Ambientazioni GDR
Ambientazioni GDR
La quarta lista di ambientazioni non sfruttate dai gestori di giochi di ruolo. Utile per avere spunti per un nuovo gdr!
The Hobbit
The Hobbit
The Hobbit tra fiaba e mito: un viaggio verso la crescita
Forgotten Maps
Forgotten Maps
Forgotten Maps: la mappa gratuita interattiva dei Forgotten Realms!

Pubblicità

Accedi o Registrati

user

password

Registrati Password?

Risorse del Portale

Utenti Online 426 Utenti Online
Articoli Articoli, Interviste e Tesi
Forum Forum
Sondaggi Sondaggi
Open Source Open Source
Annucni di Ricerca Annunci di Ricerca
Personaggi Ricerca Personaggio
Segnala Gioco Segnala Gioco

Pubblicità

Ultime dal Portale

risposta Il gestore di Il Grande Blu ha risposto alla recensione di spike92

news Felix Felicis GdR - Harry Potter GdR: La Resistenza?

Metin2 Metin2 → Sfida i tuoi rivali a battersi con te e dimostra la tua superiorità in questo mondo fantasy!

annuncio venus dormiens ha aperto un annuncio di ricerca: Origo Haeredis - Harry Potter Gdr ricerca Giocatore

news Metin2: Server Boost Yohara – Dettagli e FAQ

news Sea of Conquest: Ci dai una mano ai #PocketGamer Awards 2024?

goldaries ha recensito Games of Thrones Winter is Coming

Entropia Universe Entropia Universe → Lascia che il tuo avatar esplori nuovi mondi e viaggi tra i pianeti in questo stupendo MmoRpg Sci-Fi Free to Play!

spike92 ha recensito Il Grande Blu

World of Warship: Aggiornamento 13.11: anteprima

gdr-online.com ha risposto alla discussione: Parere su BrowserGame

W40K Dathyar: Specializzazioni

NosTale NosTale → Con l’aiuto della spada e della bacchetta magica risolverai abilmente intricate missioni e domerai coraggiosamente mostri selvaggi!

NosTale: Ora nel NosMall: dolcissimi mini-pet

DarkOrbit: Aggiorna la scatola dell'Apocalisse!

I dati del generatore di rank sono stati aggiornati!

aik ha aperto una nuova discussione: Parere su BrowserGame

DarkOrbit DarkOrbit → Galassie remote e pericoli in agguato ti attendono. Vinci battaglie avvincenti in DarkOrbit: diventa un cosmonauta temerario e combatti!

Pubblicità

Articoli e altro

Codici di Stato HTTP Codici di Stato HTTP - Guida ai codici di Stato HTTP e relativi errori! Navighiamo informati!

Il Monaco Il Monaco - La nuova classe Monaco: Dungeons and Dragons e i Cinesi!

Storia del GdR Storia del GdR - Storia dei Giochi di Ruolo cartacei dagli albori al Duemila

Mani Nude Mani Nude - Il combattimento a mani nude in un gioco di ruolo online: tecniche e strategie

Messaggistica Messaggistica - Le App di messaggistica istantanea più utilizzate in Italia

AI 2024 AI 2024 - Ecco cosa possiamo aspettarci dall'AI entro la fine di questo anno