[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

League of Angels IIILeague of Angels III ↗
Addentratevi in un MMO RPG fantasy gratuito giocabile direttamente tramite browser grazie a League of Angels!

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

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

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

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

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

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

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


World of TanksWorld of Tanks ↗
Lanciati in epiche battaglie spalla a spalla con altri giocatori. Conquista la supremazia nel mondo dei Carri Armati!

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!

Conferenza GDR-online
Conferenza GDR-online
Conferenza sui GDR online svoltasi a Lucca and Games 2006
Planethos GdR
Planethos GdR
Intervista allo staff di Planethos GdR il gioco di ruolo ambientato nella città di Pentos!
I nostri banner
I nostri banner
Preleva i banner del nostro portale e facci conoscere!
Leggendra
Leggendra
Intervista al gestore di Leggendra.. il gioco di ruolo play by chat fantasy rinascimentale!

Pubblicità

Ultime dal Portale

news Star Wars Forum: Punti di Forza

gioco Nuovo Play by Chat Scolastico → The Last Sparks - Savannah Tales

Lineage II Lineage 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!

news Metin2: Doppio evento: Caccia al tesoro e Altromondo!

news NosTale: Scrigno Faraone infinito

gioco Gioco più visitato di Marzo 2025: Shadow Scape

gdrrank I dati del generatore di rank sono stati aggiornati!

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!

news PriMetin2: Server Comunitario!

To Capitol City GDR: Gioco Chiuso!

annuncio enchantedbaygdr ha aperto un annuncio di ricerca: Enchanted Bay Gdr ricerca Tester

news Ardhalyce: ✨ Benvenuti ad Ardhalyce! ✨

Left to Survive Left to Survive → Left To Survive è un gioco FPS con un'ambientazione post-apocalittica in cui gli Zombi hanno schiavizzato la Terra e ne hanno preso il controllo!

recensione deanna ha recensito Ex Gratia GDR

risposta Il gestore di La Tana del Ladro ha risposto alla recensione di greg

risposta Il gestore di La Tana del Ladro ha risposto alla recensione di ethara

news Age of Crystals: Buon compleanno Age of Crystals!

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 e altro

GDRCD e Land GDRCD e Land - Interessante analisi dei cambiamenti ai gdr-online con l'avvento del GDRCD

Fallen Gods Fallen Gods - Intervista ai gestori del play by chat Fallen Gods ambientato nel mondo di Percy Jackson e gli Dei dell'Olimpo

Schede PG Schede PG - Alcuni consigli di Romeo Gentile su come fare una buona scheda personaggio

Giochi Scolastici Giochi Scolastici - Lista dei giochi ambientati all'interno di scuole, università o istituti scolastici in genere!

L'Isola di Mon L'Isola di Mon - Recensione di uno dei primi giochi di ruolo online fantasy in Italia

MyCharBook MyCharBook - Intervista ad Anna, ideatrice di MyCharBook il servizio online gratuito per creare e memorizzare le schede dei propri personaggi!

Giochi One Piece Giochi One Piece - Lista completa dei giochi di ruolo online ambientati nel mondo di One Piece

Hogwarts Mystery GdR Hogwarts Mystery GdR - Intervista alla gestrice del play by forum potteriano Hogwarts Mystery GdR