Geek Answers Handbook

Prevent dragging and dropping a child in a moveable item

I have an element that I want to drag, but I have elements inside it that I do not want to drag. I hope there is a simple answer without (a lot) jQuery.

Here is what I am trying to accomplish.

<html>
  <head>
  </head>
<style>
  .a {
    width:400px;
    height:400px;
    border:1px solid black;
  }

  .b{
    width:200px;
    height:200px;
    border:1px solid black;
    margin:20px;
  }
</style>
  <body>
    <div class="a" draggable="true">
      <span>I can drag this!</span>
      <div class="b" draggable="false">
        I can drag this as well, but I don't want to.
      </div>
    </div>
  </body>

</html>

http://plnkr.co/edit/Xto7lPO32TRVScewJkS9

Any ideas?

+4
source share
2 answers

I don’t know if this question remains relevant, but I found a way to solve your problem as follows:

  <body>
    <div class="a" draggable="true">
      <span>I can drag this!</span>
      <div class="b" draggable="true" ondragstart="event.preventDefault()">
        I can drag this as well, but I don't want to.
      </div>
    </div>
  </body>

Seems a bit hacky, but it's a trick. I have not found another way to solve this problem. Hope this helps you.

Cheers Sam

+3
source

, availlable ( ):

var draggables = document.querySelectorAll('.is-draggable');

[].forEach.call(draggables, function (el) {
    var startX, startY, initialX, initialY,
        auth = function (target) {
            var notDraggables = el.querySelectorAll('.is-not-draggable');

            return [].filter.call(notDraggables, function (element) {
                return target !== element;
            }).length > 0;
        };

    function move(gesture) {
        var deltaGestureX = gesture.clientX - initialX,
            deltaGestureY = gesture.clientY - initialY,
            deltaPositionX = startX + deltaGestureX,
            deltaPositionY = startY + deltaGestureY,
            limitX = parseInt(window.innerWidth - el.clientWidth, 10),
            limitY = parseInt(window.innerHeight - el.clientHeight, 10);

        if (deltaPositionY <= 0) {
            el.style.top = '0px';
        } else if (deltaPositionY >= limitY) {
            el.style.top = limitY + 'px';
        } else {
            el.style.top = startY + deltaGestureY + 'px';
        }

        if (deltaPositionX <= 0) {
            el.style.left = '0px';
        } else if (deltaPositionX >= limitX) {
            el.style.left = limitX + 'px';
        } else {
            el.style.left = startX + deltaGestureX + 'px';
        }

        return false;
    }

    function mousemove(e) {
        move(e);
    }

    function mouseup() {
        document.removeEventListener('mousemove', mousemove);
        document.removeEventListener('mouseup', mouseup);
    }

    function touchmove(e) {
        move(e.touches[0]);
    }

    function touchend() {
        document.removeEventListener('touchmove', touchmove);
        document.removeEventListener('touchend', touchend);
    }

    el.addEventListener('touchstart', function (e) {
        if (auth(e.target)) {
            startX = el.offsetLeft;
            startY = el.offsetTop;
            initialX = e.touches[0].clientX;
            initialY = e.touches[0].clientY;
            document.addEventListener('touchmove', touchmove);
            document.addEventListener('touchend', touchend);
        }
    });

    el.addEventListener('mousedown', function (e) {
        if (auth(e.target)) {
            startX = el.offsetLeft;
            startY = el.offsetTop;
            initialX = e.clientX;
            initialY = e.clientY;
            document.addEventListener('mousemove', mousemove);
            document.addEventListener('mouseup', mouseup);
            return false;
        }
    });
});

. : http://plnkr.co/edit/d6wVpTDcGDxLHAwkAVgD?p=preview

0

More articles:


All Articles