How to drag a div on my page?

Asked

Viewed 1,984 times

4

How can I implement a drag and drop in div without that element messing with other elements of my page and getting over them?

I also needed him to stay where he was before if I push Esc.

javascript jquery html
  • 1

    You already have a basic html structure to demonstrate ?

  • 1

    The question itself is good, but it is wide, without even a sample page with the div you want to move, so -1. I think it would be possible to do this using x and y mouse data.

  • Like the cPanel of life ? Dragging one block above another ?

  • Your question already has an "answer", but it does not answer everything. The ESC part was missing to return. If you add a form of drag and drop to the question and change it just to add the ESC, I think it can be reopened. To tell you the truth, I would very much like to answer her just for that part of the ESC. kk

1 answer

8

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>

<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>

The interesting thing about it is that it has limit margin and function callback, as much as the popup is clicked to drag, how much when it stops being dragged.

As 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 operational explanations request.

  • 1

    'Cause when he drags, he either hangs or ?

  • 2

    @Zoom because of the margin (marginStop), in case the user wants to drag out the page, so not being able to return with it.

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.