[RISOLTO]Div Draggable
[RISOLTO]Div Draggable postato il 24/09/2015 22:33:05 nel forum programmazione, open source e 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
World of the Sea Battle ↗Pagine → 1
24/09/2015 22:55:07
Questo potrebbe risolverti la vita ed aprirti un mondo
https://jqueryui.com/draggable/ ↗
Cafuné ↗
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
Neverness to Everness ↗
Project Entropy ↗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! :)
Fallen Gods ↗
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'});
CRSED: F.O.A.D. ↗
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');
});
});
Tiles Survive ↗
Discussione seguita da
Pagine → 1
Rispondi alla Discussione Segui Discussione Inoltra Discussione Forum Programmazione, Open Source e Hosting Elenco Forum
Articoli, Interviste e altre Risorse!
