JSFiddle - React, Tailwind, and code Playground
HTML
<div class="drag"></div>
CSS
body {
padding: 0px;
}
.drag {
position:relative;
width:100px;
height:100px;
top:100px;
left:100px;
border:1px solid silver;
background-color:whitesmoke;
}
JavaScript
$.fn.draggableXYE = function(options) {
var defaultOptions = {
distance: 5,
dynamic: false
};
options = $.extend(defaultOptions, options);
// ADDED: Store startPosition for reverting
var startPosition = this.position();
// ADDED: Function to apply easing to passed element
function AnimateElement(element, newpos) {
$(element).stop().animate({
top: newpos.top,
left: newpos.left
}, 1000, 'easeOutCirc');
}
this.draggable({
distance: options.distance,
// ADDED: Helper function to create invisible helper
helper: function(){
return $('<div></div>').css('opacity',0);
},
start: function(event, ui) {
ui.helper.data('draggableXY.originalPosition', ui.position || {
top: 0,
left: 0
});
ui.helper.data('draggableXY.newDrag', true);
},
drag: function(event, ui) {
var originalPosition = ui.helper.data('draggableXY.originalPosition');
var deltaX = Math.abs(originalPosition.left - ui.position.left);
var deltaY = Math.abs(originalPosition.top - ui.position.top);
var newDrag = options.dynamic || ui.helper.data('draggableXY.newDrag');
ui.helper.data('draggableXY.newDrag', false);
var xMax = newDrag ? Math.max(deltaX, deltaY) === deltaX : ui.helper.data('draggableXY.xMax');
ui.helper.data('draggableXY.xMax', xMax);
var newPosition = ui.position;
if (xMax) {
newPosition.top = originalPosition.top;
}
if (!xMax) {
newPosition.left = originalPosition.left;
}
// ADDED: Animate original object with easing to new position
AnimateElement(this, newPosition);
return newPosition;
},
// ADDED: Stop event to support reverting
...