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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title">Move stuff between containers</h4>
<p class="text-muted font-14 mb-3">
Just specify the data attribute
<code>data-plugin='dragula'</code> and
<code>data-containers='["first-container-id", "second-container-id"]'</code>.
</p>
<div class="row" data-plugin="dragula" data-containers='["company-list-left", "company-list-right"]'>
<div class="col-md-6">
<div class="bg-dragula p-2 p-lg-4">
<h5 class="mt-0">Part 1</h5>
<div id="company-list-left" class="py-2">
<div class="card mb-0 mt-2 draggable-item" id = "1">
<div class="card-body">
<div class="media">
<img src="<?php echo base_url('uploads/user_image/1.jpg'); ?>" alt="image" class="mr-3 d-none d-sm-block avatar-sm rounded-circle">
<div class="media-body">
<h5 class="mb-1 mt-0">Louis K. Bond</h5>
<p> Founder & CEO </p>
<p class="mb-0 text-muted">
<span class="font-italic"><b>"</b>Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.</span>
</p>
</div> <!-- end media-body -->
</div> <!-- end media -->
</div> <!-- end card-body -->
</div> <!-- end col -->
<div class="card mb-0 mt-2 draggable-item" id = "2">
<div class="card-body">
<div class="media">
<img src="<?php echo base_url('uploads/user_image/1.jpg'); ?>" alt="image" class="mr-3 d-none d-sm-block avatar-sm rounded-circle">
<div class="media-body">
<h5 class="mb-1 mt-0">Dennis N. Cloutier</h5>
<p> Software Engineer </p>
<p class="mb-0 text-muted">
<span class="font-italic"><b>"</b>Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.</span>
</p>
</div> <!-- end media-body -->
</div> <!-- end media -->
</div> <!-- end card-body -->
</div> <!-- end col -->
<div class="card mb-0 mt-2 draggable-item" id = "3">
<div class="card-body">
<div class="media">
<img src="<?php echo base_url('uploads/user_image/1.jpg'); ?>" alt="image" class="mr-3 d-none d-sm-block avatar-sm rounded-circle">
<div class="media-body">
<h5 class="mb-1 mt-0">Susan J. Sander</h5>
<p> Web Designer </p>
<p class="mb-0 text-muted">
<span class="font-italic"><b>"</b>Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.</span>
</p>
</div> <!-- end media-body -->
</div> <!-- end media -->
</div> <!-- end card-body -->
</div> <!-- end col -->
</div> <!-- end company-list-1-->
</div> <!-- end div.bg-light-->
</div> <!-- end col -->
<div class="col-md-6">
<div class="bg-dragula p-2 p-lg-4">
<h5 class="mt-0">Part 2</h5>
<div id="company-list-right" class="py-2">
<div class="card mb-0 mt-2 draggable-item" id="4">
<div class="card-body p-3">
<div class="media">
<img src="<?php echo base_url('uploads/user_image/1.jpg'); ?>" alt="image" class="mr-3 d-none d-sm-block avatar-sm rounded-circle">
<div class="media-body">
<h5 class="mb-1 mt-0">James M. Short</h5>
<p> Web Developer </p>
<p class="mb-0 text-muted">
<span class="font-italic"><b>"</b>Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh </span>
</p>
</div> <!-- end media-body -->
</div> <!-- end media -->
</div> <!-- end card-body -->
</div> <!-- end col -->
<div class="card mb-0 mt-2 draggable-item" id="5">
<div class="card-body p-3">
<div class="media">
<img src="<?php echo base_url('uploads/user_image/1.jpg'); ?>" alt="image" class="mr-3 d-none d-sm-block avatar-sm rounded-circle">
<div class="media-body">
<h5 class="mb-1 mt-0">Gabriel J. Snyder</h5>
<p> Business Analyst </p>
<p class="mb-0 text-muted">
<span class="font-italic"><b>"</b>Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh </span>
</p>
</div> <!-- end media-body -->
</div> <!-- end media -->
</div> <!-- end card-body -->
</div> <!-- end col -->
<div class="card mb-0 mt-2 draggable-item" id="6">
<div class="card-body p-3">
<div class="media">
<img src="<?php echo base_url('uploads/user_image/1.jpg'); ?>" alt="image" class="mr-3 d-none d-sm-block avatar-sm rounded-circle">
<div class="media-body">
<h5 class="mb-1 mt-0">Louie C. Mason</h5>
<p>Human Resources</p>
<p class="mb-0 text-muted">
<span class="font-italic"><b>"</b>Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh </span>
</p>
</div> <!-- end media-body -->
</div> <!-- end media -->
</div> <!-- end card-body -->
</div> <!-- end col -->
</div> <!-- end company-list-2-->
</div> <!-- end div.bg-light-->
</div> <!-- end col -->
</div> <!-- end row -->
</div> <!-- end card-body -->
</div> <!-- end card -->
</div> <!-- end col -->
</div>
<script type="text/javascript">
onDomChange(function(){
var containerArray = ['company-list-left', 'company-list-right'];
for(var i = 0; i < containerArray.length; i++) {
$('#'+containerArray[i]).each(function () {
$(this).find('.draggable-item').each(function() {
console.log(this.id);
});
});
}
console.log('------------');
});
</script>