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