jQuery div拖拽用法实例

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


<!doctype html>
<html lang="en">
<head>
<meta charset="U
文章正文

本文实例讲述了jQuery div拖拽用法。分享给大家供大家参考，具体如下：

这里需要引用好jquery 和 jqueryui两个包：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!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程序设计有所帮助。
代码注释
上一篇在Win10里如何找到Internet Explorer?下一篇JavaWeb工程中集成YMP框架快速上手

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！