jQuery div拖曳用法實例_jquery
- WBOY原創
- 2016-05-16 15:20:051022瀏覽
本文實例講述了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程式設計有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn