BootStrap練習

https://mdbootstrap.com/plugins/jquery/draggable/

HTML--

<div class="row">

<div class="col-md-4">

<!-- Card -->

<div id="draggable-events" class="card">

<!-- Card image -->

<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" alt="Card image cap">

<!-- Card content -->

<div class="card-body">

<!-- Title -->

<h4 class="card-title"><a>Draggable card</a></h4>

<!-- Text -->

<p class="card-text">Start event fired <span class="start-event">0</span> times</p>

<hr>

<p class="card-text">Drag event fired <span class="drag-event">0</span> times</p>

<hr>

<p class="card-text">Stop event fired <span class="stop-event">0</span> times</p>

</div>

</div>

<!-- Card -->

</div>

</div>

-------------

JAVASCTIPT---

$('#draggable-events').draggable({

start: onDragStart,

drag: onDrag,

stop: onDragStop

});

var $startCounter = $('.start-event');

var $dragCounter = $('.drag-event');

var $stopCounter = $('.stop-event');

var counts = {

start: 0,

drag: 0,

stop: 0

};

function onDragStart() {

counts.start++;

updateCounter($startCounter, counts.start);

}

function onDrag() {

counts.drag++;

updateCounter($dragCounter, counts.drag);

}

function onDragStop() {

counts.stop++;

updateCounter($stopCounter, counts.stop);

}

function updateCounter(selector, value) {

$(selector).text(value);

}