本文實例講述了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>更多關(guān)于jQuery特效相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常見經(jīng)典特效匯總》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
新聞熱點
疑難解答
