jquery拖动层效果插件用法实例分析(附demo源码)
本文实例讲述了jquery拖动层效果插件用法。分享给大家供大家参考，具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"dir="ltr">
<headprofile="http://gmpg.org/xfn/11">
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>DragDropPanels-WebDeveloperPlusDemos</title>
<scripttype="text/javascript"src="js/jquery-1.3.2.js"></script>
<scripttype="text/javascript"src="js/jquery-ui-1.7.2.custom.min.js"></script>
<linkrel="stylesheet"type="text/css"href="styles.css"/>
<scripttype="text/javascript">
$(function(){
$('.dragbox')
.each(function(){
$(this).hover(function(){
$(this).find('h2').addClass('collapse');
},function(){
$(this).find('h2').removeClass('collapse');
})
.find('h2').hover(function(){
$(this).find('.configure').css('visibility','visible');
},function(){
$(this).find('.configure').css('visibility','hidden');
})
.click(function(){
$(this).siblings('.dragbox-content').toggle();
})
.end()
.find('.configure').css('visibility','hidden');
});
$('.column').sortable({
connectWith:'.column',
handle:'h2',
cursor:'move',
placeholder:'placeholder',
forcePlaceholderSize:true,
opacity:0.4,
stop:function(event,ui){
$(ui.item).find('h2').click();
varsortorder='';
$('.column').each(function(){
varitemorder=$(this).sortable('toArray');
varcolumnId=$(this).attr('id');
sortorder+=columnId+'='+itemorder.toString()+'&';
});
alert('SortOrder:'+sortorder);
/*Passsortordervariabletoserverusingajaxtosavestate*/
}
})
.disableSelection();
});
</script>
</head>
<body>
<h3>DragnDropPanels</h3>
<divclass="column"id="column1">
<divclass="dragbox"id="item1">
<h2>Handle1</h2>
<divclass="dragbox-content">
Loremipsumdolorsitamet,consecteturadipiscingelit.Donecvestibulumvelitultriciesorcipharetraelementum.Inmassamauris,variussedtempusa,iaculissederat.Utsollicitudintellusmollisarculaoreetsemper.Suspendisseutfelisodio.Aliquamauctor,tortorsitametsuscipitelementum,nuncantedictumlectus,acaccumsanjustonuncsedvelit.Sedsollicitudinvariustortorvitaevarius.Aliquaminterdum,nislconsecteturlaoreetcommodo,metusmassasagittisnisl,nonvenenatislacusminectortor.Utmalesuadaauctordolor,idpulvinarestmalesuadased.Aliquamsedposuereorci.
</div>
</div>
<divclass="dragbox"id="item2">
<h2><spanclass="configure"><ahref="#">Configure</a></span>Handle2</h2>
<divclass="dragbox-content">
Phasellusporttitoradipiscinglacusactempus.Vivamusgravidaauguemetus,eucursusnisl.Etiamarcueros,placeratsedrhoncusat,portaetelit.Aeneanpharetraanteneque.Aeneanidegestasorci.Suspendissepotenti.Nuncatmagnaleo,sedportaerat.Proinegetnequeturpis,velblanditmassa.Donecveltortormagna.Curabituridnibhmagna,nechendreritnibh.
</div>
</div>
<divclass="dragbox"id="item3">
<h2>Handle3</h2>
<divclass="dragbox-content">
Proinporttitoreuismodcondimentum.Integersuscipitnibhnecauguefacilisisutcommodonisiornare.Namsedmaurisvitaejustoconvallisplacerat.Curabiturviverra,ipsumidvolutpatsollicitudin,minisicondimentumnulla,necdapibusvelitliberoegetorci.Nampuruslectus,imperdietpharetrapulvinarac,sodalessitametsem.Utvelmollisante.Vivamusconsecteturvariusrisuseuhendrerit.Sedscelerisqueeuismodleo,quisaccumsanjustovenenatiseu.Utrisuslorem,aliquetidfermentumnec,auctorutenim.Utpretiumelementumturpisveldignissim.
</div>
</div>
</div>
<divclass="column"id="column2">
<divclass="dragbox"id="item4">
<h2>Handle4</h2>
<divclass="dragbox-content">
Nullammetusmagna,tristiquevelultricesa,molestiequisdolor.Curabiturportaportaullamcorper.Duisvariusvelitetduiauctorpretiumbibendumurnagravida.Sedeuismodduiintelluseuismodeuismod.Namconvallisornarefermentum.Aliquamliberoaugue,ullamcorpervitaelaciniaat,vestibulumetrisus.Praesentaccumsanultricespuruseuconsequat.Phasellusposuerelobortismalesuada.Curabituracorcieuduivulputateporttitor.Sedaurnaetodiovulputateeuismod.Cumsociisnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.Involutpat,tortoreudapibusvestibulum,risusmetuseleifendipsum,quislobortiselitdolorvelligula.Aliquamultricesnuncinelitbibendumpharetra.Utnonantesagittisarcuimperdietposuere.Duisconsecteturmassasitametenimscelerisqueconsequatetegetmagna.Curabiturtristiquemolestiesemquisvulputate.Sedeleifendurnaneque.Namplaceraterosnonaugueconsequatvestibulum.
</div>
</div>
<divclass="dragbox"id="item5">
<h2>Handle5</h2>
<divclass="dragbox-content">
Namrhoncussodaleslibero,etfacilisisnisivolutpatet.Nullamtelluseros,consequategettristiqueultricies,rhoncusvitaemagna.Duisnecscelerisqueorci.Nullamaenimest,eteleifendnunc.Proinduieros,vulputateegetconsecteturquis,ultricesacsem.Nullaaliquammetuseumagnaplaceratplacerat.Suspendisseegettellusturpis,etultriciesnisi.Etiamindiammi,sedtincidunteros.Phasellusconvallisaliquamarcu,vitaefringillaquampharetrased.Inataugueatnibhplaceratfeugiatatidelit.Curabitursitametquamutturpismolestieblanditinvelnulla.
</div>
</div>
</div>
<hrstyle="clear:both;"/>
<p>
DemoProvidedBy:<ahref="http://webdeveloperplus.com"title="WebDeveloperPlus-UltimateWebDevelopment&DesignResource">Web
DeveloperPlus</a></p>
</body>
</html>
完整实例代码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。