How to drag a div on my page? [duplicate]

Question

How to drag a div on my page? [duplicate]

Navigation

#1 by (7 votes)

3

How can I implement a drag and drop on a div without this element moving with other elements of my page and staying on top of them?

I also needed it to stay where it was before, if I hit Esc .

javascript html jquery

asked by anonymous 03.02.2016 / 03:00

1 answer

Obtaining Rest of a Floating Point What is the best way to publish my Asp.NET C # application to Azure?

score 7 · Answer 1

Some time ago I developed this function:

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><divclass="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>

The interesting thing about it is that it has border and function callback , both when popup is clicked to drag, and when to stop being dragged.

Since about 90% of it is in pure JS, it would not be complicated to change events in jQuery by events in pure JS.

Callback Layer

function callMoveOn(){
    console.log('on');
}

function callMoveStop(){
    console.log('stop');
}

movePopUp(callMoveOn, callMoveStop);

If you want explanations of operation, please ask.