jQuery - drag n drop element by Norlihazmey Ghazali

by Norlihazmey Ghazali

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="container">
    <div class="grid simple">
        <div class="grid-title no-border">
             <h6 class="text-black bold "><span>Options </span></h6>
You have <span class="badge badge-info" id="availableOption">3</span> options left to choose.
            <br>
            <table class="table listChosenCourses" style="display: table;">
                <thead>
                    <tr>
                        <th>Option.</th>
                        <th>Institution</th>
                        <th>Course</th>
                    </tr>
                </thead>
                <tbody class="ui-sortable">
                    <tr data-send-course-id="17" data-send-insti-id="8" style="display: table-row;">
                        <td>2</td>
                        <td>University 3</td>
                        <td>Degree abde</td>
                        <td><a href="javascript:;" class="btn btn-danger btn-small btnCourseDelete"><i class="fa fa-trash"></i></a>

                        </td>
                    </tr>
                    <tr data-send-course-id="15" data-send-insti-id="8" style="display: table-row;">
                        <td>1</td>
                        <td>University 3</td>
                        <td>Degree ab</td>
                        <td><a href="javascript:;" class="btn btn-danger btn-small btnCourseDelete"><i class="fa fa-trash"></i></a>

                        </td>
                    </tr>
                    <tr data-send-course-id="10" data-send-insti-id="5">
                        <td>3</td>
                        <td>Institute</td>
                        <td>Degree ab</td>
 ...

CSS

.placeholder-draggable {
    background:#E5E9EC;
    -moz-box-shadow: inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow: inset 0 0 10px #000000;
}

JavaScript

$('.listChosenCourses').find('tbody').sortable({
    cursor: 'move',
    placeholder: 'placeholder-draggable',
    containment : $('.listChosenCourses').find('tbody'),
    tolerance : 'pointer',
    /*revert: true, enable this to smooth placing */
    helper: function (e, tr) {
        console.log(tr);
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function (index) {

            $(this).width($originals.eq(index).width());
        });
        return $helper;



    },
    change: function (event, ui) {
        console.log('change');
        //$( ui.item ).css('border', '1px solid green');
    },
    out: function () {
        console.log('out');
    },
    sort: function (e, ui) {
        console.log('sort');
        /* enable this to smooth placing
        ui.helper.css("left",0);
        ui.helper.css("top",0);*/
    },
    start: function (e, ui) {
        /*ui.helper.closest( 'tbody' ).css({
            'border' : '2px solid red',
            '-webkit-box-shadow' : '2px 4px 1px black',
            'box-shadow' : '2px 4px 1px black'
        });*/
        ui.helper.children().css({
            'border': 'none'
        });
        ui.helper.css({
            'border': '1px solid #E5E9EC',
            'background' : 'white'
            
        });
    },
    stop: function (e, ui) {
        // ui.helper.css('border', 'none');
    }
});