function moveElement() {
$('[data-parent-move]').each(function() {
var $this = $(this),
object = $(this).find('[data-move]'),
valueX,
valueY,
posX,
posY;
$(this).on('mouseenter', function(){
$(this).find('[data-move]').each(function(){
posX = parseInt($(this).css('left'),10);
posY = parseInt($(this).css('top'),10);
moveOnBoard($(this), posX, posY);
})
})
function moveOnBoard($this2, posX, posY){
$this.on('mousemove', function(e){
if(e.target.closest('[data-parent-move]')){
var target = e.target.closest('[data-parent-move]');
var targetCoords = target.getBoundingClientRect();
var xCoord = e.clientX - targetCoords.left;
var yCoord = e.clientY - targetCoords.top;
if ($this2.attr('data-move') == 'plus') {
valueX = (e.pageX * -1 / $this2.attr('data-move-speed'));
valueY = (yCoord * -1 / $this2.attr('data-move-speed'));
moveSide($this2, valueX, valueY, posX, posY);
} else {
valueX = (e.pageX * 1 / $this2.attr('data-move-speed'));
valueY = (yCoord * 1 / $this2.attr('data-move-speed'));
moveSide($this2, valueX, valueY, posX, posY);
}
}
})
}
})
}
function moveSide(object, valueX, valueY, posX, posY){
object.css({
'transform' : 'translate(' + valueX + 'px,' + (valueY) + 'px)',
'transition' : 'all .2s',
'transition-timing-function' : 'ease-out'
})
}
jQuery(document).ready(function($){
//open popup
$('.cd-popup-trigger').on('click', function(event){
event.preventDefault();
var popup = $(this).attr('href');
$('.cd-popup').each(function(){
if($(this).attr('data-popup') === popup){
$(this).addClass('is-visible');
}
});
});
//close popup
$('.cd-popup').on('click', function(event){
if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup') ) {
event.preventDefault();
$(this).removeClass('is-visible');
}
});
//close popup when clicking the esc keyboard button
$(document).keyup(function(event){
if(event.which=='27'){
$('.cd-popup').removeClass('is-visible');
}
});
});
<a href="#0" class="cd-popup-trigger">View Pop-up</a>
<a href="#1" class="cd-popup-trigger">View Pop-up</a>
<div class="cd-popup" role="alert" data-popup='#0'>
<div class="cd-popup-container">
<p>Are you sure you want to delete this element?</p>
<ul class="cd-buttons">
<li><a href="#0">Yes 0</a></li>
<li><a href="#0">No 0</a></li>
</ul>
<a href="#0" class="cd-popup-close img-replace">Close</a>
</div> <!-- cd-popup-container -->
</div> <!-- cd-popup -->
<div class="cd-popup" role="alert" data-popup='#1'>
<div class="cd-popup-container">
<p>Are you sure you want to delete this element?</p>
<ul class="cd-buttons">
<li><a href="#1">Yes 1</a></li>
<li><a href="#1">No 1</a></li>
</ul>
<a href="#0" class="cd-popup-close img-replace">Close</a>
</div> <!-- cd-popup-container -->
</div> <!-- cd-popup -->