salve,
sto da poco studiando il drag n drop con jquery ed ho subito riscontrato un malfunzionamento del mio programma che non riesco a risolvere:
- creo due box in html uno pi� piccolo che chiamo 'oggetto' e uno pi� grande che chiamo 'contenitore'.
- li posiziono sullo schermo tramite 'top' e 'left' in css imponendo 'position:absolute'
- creo il file js con le istruzioni jquery per gestire sia il drag che il drop
- quando per� provo a spostare 'oggetto' dentro 'contenitore' , dopo averlo lasciato col mouse, esso si posiziona in un posto che decide lui! stessa cosa accade quando lo esco dal contenitore.
- tutto ci� non accade e funziona quando imposto i box (<div>) con 'position:relative'
Come mai? come posso risolvere? Se lascio i box a 'position:relative' come li posiziono sullo schermo?
allego i sorgenti:
CSS (oggetti.css):
codice:#oggetto { position:absolute !important; height:100px; width:100px; left:20px; top:200px; background-color: aqua !important; } #oggetto:hover { cursor:move } #contenitore { position:absolute !important; height:300px; width:300px; left:300px; top:100px; background-color: #b2b3c5 !important; } .shadow { -webkit-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.77); -moz-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.77); box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.77); } .base { background-color: yellow; height: 605px; width: 100%; }
JSCRIPT (myfunc.js)
codice:$("#oggetto") .draggable({ appendTo: ".base", //quando creato viene appeso a .base containment: ".base", //non puo' essere spostato fuori da .base opacity: 0.35, //quando inizia il drag l'oggetto diventa opaco refreshPositions: true, start: function() { $(this).addClass("shadow"); $(this).css({position:'absolute'}); }, stop: function() {$(this).removeClass("shadow");} }) .resizable({ aspectRatio: false }); $("#contenitore") .droppable({ drop: function( event, ui ) { var dropped = ui.draggable; var droppedOn = $(this); $(dropped).detach().appendTo(droppedOn); var zi=$(droppedOn).css("z-index"); zi++; $(dropped).css("z-index",zi); }, out: function( event, ui ) { var dropped = ui.draggable; var droppedOn = $(this); $(dropped).detach().appendTo($('.base')); } });
HTML (index.html)
codice:<!DOCTYPE HTML> <html lang="it-IT"> <head> <meta charset="utf-8"> <title>FORMAKER - FORM MAKER 2017</title> <link href="css/oggetti.css" rel="stylesheet" type="text/css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> </head> <body> <div class='base' id='pannello-base'><p>pannello-base</p> <div class="ui-widget-content " id='contenitore'><p>contenitore</p></div> <div class="ui-widget-content " id='oggetto'><p>oggetto</p></div> </div> </body> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> <script type="text/javascript" src="js/myfunc.js"></script> </html>
Grazie. Ciao
Rispondi quotando