drag e drop disabilitato con jquery

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
Buona pasquetta a tutti!
Vengo al sodo, sto cercandodi realizzare una pagina con le foto con effetto polaroid. Ci sono alcune guide in rete ma ho un problema che non riesco a Questo è il codice che mi gestisce la posizione delle foto
HTML:
	var zindex = 50;
	
	$(document).ready(function(){
		// Create your interaction code here
		$("#pinboard ul li").each(function(){
			xpos = Math.floor(Math.random()*920);
			ypos = Math.floor(Math.random()*420);
			rotation = Math.floor(Math.random()*15);
			if(Math.floor(Math.random()*11)>5) {
				rotation = rotation * -1;
			}
			$(this).data("rotation",rotation);
			$(this).delay(1000).animate({top:ypos,left:xpos}).css({webkitTransform:"rotate("+rotation+"deg)",MozTransform:"rotate("+rotation+"deg)",msTransform:"rotate("+rotation+"deg)",transform:"rotate("+rotation+"deg)"});
		}).draggable({
			start: function(){
				zindex = zindex + 1;
				$(this).css({zIndex:zindex});					
			},
			stop: function(){
				rotation = Math.floor(Math.random()*15);
				if(Math.floor(Math.random()*11)>5) {
					rotation = rotation * -1;
				}
				$(this).data("rotation",rotation);
				$(this).css({webkitTransform:"rotate("+rotation+"deg)",MozTransform:"rotate("+rotation+"deg)",msTransform:"rotate("+rotation+"deg)",transform:"rotate("+rotation+"deg)"});
			}
		});
		

		
	});
e fin qui tutto ok, poi quando vado ad inserire il codice che mi gestisce il menù questo
HTML:
<script type="text/javascript">
    $(function() {
        /**
        * for each menu element, on mouseenter,
        * we enlarge the image, and show both sdt_active span and
        * sdt_wrap span. If the element has a sub menu (sdt_box),
        * then we slide it - if the element is the last one in the menu
        * we slide it to the left, otherwise to the right
        */
        $('#sdt_menu > li').bind('mouseenter',function(){
            var $elem = $(this);
            $elem.find('img')
                 .stop(true)
                 .animate({
                    'width':'127px',
                    'height':'127px',
                    'left':'0px'
                 },400,'easeOutBack')
                 .andSelf()
                 .find('.sdt_wrap')
                 .stop(true)
                 .animate({'top':'100px'},500,'easeOutBack')
                 .andSelf()
                 .find('.sdt_active')
                 .stop(true)
                 .animate({'height':'127px'},300,function(){
                var $sub_menu = $elem.find('.sdt_box');
                if($sub_menu.length){
                    var left = '127px';
                    if($elem.parent().children().length == $elem.index()+1)
                        left = '-127px';
                    $sub_menu.show().animate({'left':left},200);
                }
            });
        }).bind('mouseleave',function(){
            var $elem = $(this);
            var $sub_menu = $elem.find('.sdt_box');
            if($sub_menu.length)
                $sub_menu.hide().css('left','0px');

            $elem.find('.sdt_active')
                 .stop(true)
                 .animate({'height':'0px'},300)
                 .andSelf().find('img')
                 .stop(true)
                 .animate({
                    'width':'0px',
                    'height':'0px',
                    'left':'85px'},400)
                 .andSelf()
                 .find('.sdt_wrap')
                 .stop(true)
                 .animate({'top':'25px'},500);
        });
    });
</script>
perdo la possibilità del drag e drop. Devo quindi trovare una soluzione o cambiare tipologia di slide. Qualcuno sa aiutarmi? Dimenticavo questo è il markup
HTML:
		<div id="pinboard">
			<ul>
				<li><img src="images/photo1.jpg" width="300" height="300" alt="Photo 1" /><span>A skiing bothy we had lunch at</span></li>
				<li><img src="images/photo2.jpg" width="300" height="300" alt="Photo 2" /><span>Fantastic craggy mountains!</span></li>
				<li><img src="images/photo3.jpg" width="300" height="300" alt="Photo 3" /><span>The lake was amazing</span></li>
				<li><img src="images/photo4.jpg" width="300" height="300" alt="Photo 4" /><span>Ellie bought a naff snowman</span></li>
				<li><img src="images/photo5.jpg" width="300" height="300" alt="Photo 5" /><span>Showing off my mad skills!</span></li>
				<li><img src="images/photo6.jpg" width="300" height="300" alt="Photo 6" /><span>The edge of the glacier - breathtaking</span></li>
				<li><img src="images/photo7.jpg" width="300" height="300" alt="Photo 7" /><span>Couldn't resist the powder!</span></li>
				<li><img src="images/photo8.jpg" width="300" height="300" alt="Photo 8" /><span>This robin woke us up every morning</span></li>
				<li><img src="images/photo9.jpg" width="300" height="300" alt="Photo 9" /><span>Aw bless!</span></li>
				<li><img src="images/photo10.jpg" width="300" height="300" alt="Photo 10" /><span>One of the lifts - amazing views</span></li>
			</ul>
			<div id="instructions">
				<h1>Our winter hols</h1>
				<p>Check out my holiday photos from our skiing trip to the Alp. You can click to drag the snaps around, and release to drop them in place.</p>			
			</div>
		</div>
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Drag and Drop non capisco le sequenze... Javascript 1
L [Javascript] Drag and drop. Aggiornamento Campo Javascript 2
J Jquery ui drag drop move jQuery 0
G Piccolo problema con il Drag&Drop jQuery 0
S Selezionare files con drag and drop prima di upload PHP 0
A Drag and drop per ipad , questo sconosciuto... Javascript 1
R ordinamento immagini con drag and drop e memorizzazione db PHP 1
A copiare dati in mysql con drag & drop jQuery 0
max1974 grid e json con drag e drop jQuery 0
M Upload con drag and drop PHP 1
zighy memorizzare gli elementi di un drag n drop Javascript 4
zighy drag drop Javascript 11
D Drag and drop immagini non compatibile con FF Javascript 1
D Drag & drop HTML5. Problema con ie e chrome! HTML e CSS 1
renegade Vendo Agenda prenotazioni sistema Drag & Drop Offerte e Richieste di Lavoro e/o Collaborazione 0
WorldWideWeb Drag&Drop su TreeView Visual Basic 0
L java,oggetti grafici e drag and drop Java 2
J Drag and drop in vb Visual Basic 1
N drag & drop Flash 1
E drag & drop Flash 1
M complesso drag&drop Flash 0
Erzsébeth Drag div con class Javascript 9
Z Drag div solo all'interno del box Javascript 7
Z Errore DRAG DIV Javascript 1
Z Ogni Drag DIV ha le sue dimensioni Javascript 2
M Drag and Resize Javascript 0
M [PHP] Drop down in campo select PHP 1
M [PHP] Interrompere DROP TABLE con PDO PHP 0
O Drop menu o menu a tendina HTML e CSS 5
S Problema drop-down box PHP 22
R Drop database jolly MySQL 1
J Drop down menu HTML e CSS 0
M Creare un menu drop-down in app Android Sviluppo app per Android 1
P sito e-commerce drop shipping E-Commerce 3
A funzione per popolare un drop down list Javascript 4
D Come posso rendere obbligatorio un drop down menu? Javascript 12
S AIUTO piccola modifica Drop Down Menu Javascript 0
D Menu Drop Down HTML e CSS 0
F Drop Down Menu compatibile con internet explorer HTML e CSS 0
Trogo Mysql: Drop all tables MySQL 0
J FAQ Drop Down script Javascript 0
J Animated Drop Down Navigation Menu Javascript 0
Z Recupero Values da Drop Down menu: Questioni PHP 0
U Aiuto per Drop Down Menu tre livelli PHP 0
G menu orizzontale drop-down HTML e CSS 0
X-Zeus Drop-Down Menu in php PHP 3
D drop down & flash Javascript 0
S errore nel compilare una drop down list ASP.NET 0
zerofolle Task manager disabilitato Windows e Software 2
M Editor registro di configurazione disabilitato Windows e Software 3

Discussioni simili