Como posso implementar um drag e drop num div
sem que esse elemento mexesse com outros elementos da minha página e ficasse por cima deles?
Também precisava que ele ficasse onde estava, anteriormente, se eu apertar Esc.
Como posso implementar um drag e drop num div
sem que esse elemento mexesse com outros elementos da minha página e ficasse por cima deles?
Também precisava que ele ficasse onde estava, anteriormente, se eu apertar Esc.
Há algum tempo eu desenvolvi esta função :
function parseNumber(num) {
return parseFloat(num.replace(/[^\d]/)) || 0;
}
var movePopUp = (function() {
var startX;
var startY;
var currentPopUp = null;
var currentWidth = 0;
var currentHeight = 0;
var currentLeft = 0;
var currentTop = 0;
var callMoveOnPopUp = null;
var callMoveStopPopUp = null;
var contentMove = '.popup .title';
var move = false;
var marginStop = 30;
var maxWidth = window.innerWidth - marginStop;
var maxHeight = window.innerHeight - marginStop;
jQuery(contentMove).on('mousedown', function(e) {
currentPopUp = this.parentNode.parentNode;
currentLeft = parseNumber(currentPopUp.style.left);
currentTop = parseNumber(currentPopUp.style.top);
startX = e.clientX;
startY = e.clientY;
if (typeof(callMoveOnPopUp) == 'function')
callMoveOnPopUp(currentPopUp);
move = true;
});
jQuery(document).on('mouseup', function() {
if (currentPopUp == null) return;
if (typeof(callMoveStopPopUp) == 'function')
callMoveStopPopUp(currentPopUp);
currentPopUp = null;
move = false;
})
jQuery(document).on('mousemove', function(e) {
if (move == true) {
var newX = currentLeft + e.clientX - startX;
var newY = currentTop + e.clientY - startY;
if (marginStop > e.clientX) return;
if (marginStop > e.clientY) return;
if (maxWidth < e.clientX) return;
if (maxHeight < e.clientY) return;
jQuery(currentPopUp).css({
'left': newX,
'top': newY,
});
}
});
return function(func1, func2) {
callMoveOnPopUp = func1;
callMoveStopPopUp = func2;
}
})();
.popup{
position : fixed;
width : 250px;
height : 200px;
border : 1px solid #000;
}
.popup .title{
width: 240px;
text-align:center;
margin: 5px;
background: #CCC;
cursor : move;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="popup" style="top:50px; left:50px;">
<div class="popup_head">
<div class="title">
<span>TESTE DE POPUP</span>
</div>
</div>
<div class="popup_body">
</div>
</div>
O interessante dela é que possui margem limite e função callback
, tanto quando o popup
é clicado para arrastar, quanto quando para de ser arrastado.
Como cerca de 90% dele esta em JS puro, não seria complicado alterar os eventos no jQuery por eventos no JS puro.
function callMoveOn(){
console.log('on');
}
function callMoveStop(){
console.log('stop');
}
movePopUp(callMoveOn, callMoveStop);
Caso queira explicações de funcionamento solicite.
marginStop
), caso o usuário queira arrastar para fora da pagina, assim não conseguindo voltar com ela.
Commented
3/02/2016 às 10:40