jQuery div拖拽用法实例

本文实例讲述了jQuery div拖拽用法。分享给大家供大家参考，具体如下：
这里需要引用好jquery 和 jqueryui两个包：

<！doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><script src="jquery1.8.3.js"></script><script src="jquery-ui.js"></script><style>.yuanjian{float:left;width:180px;height:22px;padding-left:5px;margin-left:5px;margin-top:5px;cursor:pointer;border: 1px solid orange;}.fish{float:left;width:180px;height:22px;padding-left:5px;margin-left:15px;margin-top:15px;cursor:pointer;border: 1px solid red;}</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_"）{var tmpId = "fish_"+ele.id.substr（13,ele.id.length-13）;var new_div = "<div class="fish" id=""+tmpId+"">"+$（"#"+ele.id）.html（） +" </div>";$（this）.before（new_div）;//可以在这里绑定tmpId事件}}}}）;}）;var ele = "";var add_div_num = 0;function add_yuanjian（）{add_div_num++;var div_id = "div_yuanjian_"+add_div_num;var add_div = "<div class="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><div style="height:400px;width:400px;border:1px solid gray;"><div style="margin-left:10px;margin-top:10px;border:1px solid red;width:100px;height10px;">展示列表</div><div id="add_div" style="margin-left:10px;margin-top:10px;border:1px solid green;width:350px;height:320px;"></div></div><div style="margin-top:10px;height:300px;width:400px; border: 1px solid gray;"><div style="margin-left:10px;margin-top:10px;border:1px solid red;width:250px;height10px;">原件列表 <button onclick="add_yuanjian（）">增加原件</button></div><div id="add_yuanjian_div"></div></div></body></html>

更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》
希望本文所述对大家jQuery程序设计有所帮助。