[RISOLTO]Div Draggable

Pagine → 1

breaker

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"

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!

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

breaker

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"

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!

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

Dark Genesis ↗
Ascendi al cielo in Dark Genesis! Raduna potenti semidei, costruisci il tuo impero volante e scontrati in battaglie divine!

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

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

})


$(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 è

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

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!

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