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程序设计有所帮助。