jQuery div拖拽用法实例
本文实例讲述了jQuerydiv拖拽用法。分享给大家供大家参考,具体如下:
这里需要引用好jquery和jqueryui两个包:
<!doctypehtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="Generator"content="EditPlus®"> <metaname="Author"content=""> <metaname="Keywords"content=""> <metaname="Description"content=""> <title>Document</title> <scriptsrc="jquery1.8.3.js"></script> <scriptsrc="jquery-ui.js"></script> <style> .yuanjian{ float:left; width:180px; height:22px; padding-left:5px; margin-left:5px; margin-top:5px; cursor:pointer; border:1pxsolidorange; } .fish{ float:left; width:180px; height:22px; padding-left:5px; margin-left:15px; margin-top:15px; cursor:pointer; border:1pxsolidred; } </style> <script> $(function(){ $('#add_div').droppable({ accept:".yuanjian", hoverClass:"droppable-hover", drop:function(event,ui){ if(ele!=''){ if(ele.id.substr(0,13)=="div_yuanjian_"){ vartmpId="fish_"+ele.id.substr(13,ele.id.length-13); varnew_div="<divclass=\"fish\"id=\""+tmpId+"\">"+$('#'+ele.id).html()+"</div>"; $(this).before(new_div); //可以在这里绑定tmpId事件 } } } }); }); varele=''; varadd_div_num=0; functionadd_yuanjian(){ add_div_num++; vardiv_id="div_yuanjian_"+add_div_num; varadd_div="<divclass=\"yuanjian\"id=\""+div_id+"\">原件"+add_div_num+"</div>"; $('#add_yuanjian_div').before(add_div); $('#'+div_id).mouseover(function(){ $(this).css({background:"#E0E0E0"}); }).mouseout(function(){ $(this).css({background:"#FFFFFF"}); }).draggable({ helper:'clone', opacity:0.5, start:function(event,ui){ ele=event.srcElement||event.target; }}); } </script> </head> <body> <divstyle="height:400px;width:400px;border:1pxsolidgray;"> <divstyle="margin-left:10px;margin-top:10px;border:1pxsolidred;width:100px;height10px;">展示列表 </div> <divid="add_div"style="margin-left:10px;margin-top:10px;border:1pxsolidgreen;width:350px;height:320px;"> </div> </div> <divstyle="margin-top:10px;height:300px;width:400px;border:1pxsolidgray;"> <divstyle="margin-left:10px;margin-top:10px;border:1pxsolidred;width:250px;height10px;">原件列表<buttononclick="add_yuanjian()">增加原件</button> </div> <divid="add_yuanjian_div"> </div> </div> </body> </html>
更多关于jQuery特效相关内容感兴趣的读者可查看本站专题:《jQuery常见经典特效汇总》
希望本文所述对大家jQuery程序设计有所帮助。