dragula.php 9.2 KB
Newer Older
Phạm Văn Đoan committed
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>