防止可拖动元素内的子元素被拖动

Question

防止可拖动元素内的子元素被拖动

4

我有一个元素，我想让它可以拖动，但是里面的元素我不想让它们能够拖动。我希望有一个简单的答案，而不需要（很多）jQuery。

这是我想要实现的效果。

<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

有什么想法吗？

- doobist

2个回答

0

你想要做的可以在这段代码中找到（它还支持手指触摸）：

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

- Bruno J. S. Lesieur

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Samuel Blattner · Accepted Answer

不知道这个问题是否仍有关联，但是我找到了一种解决方法：

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

看起来有点不太正式，但它确实解决了问题。我没有找到其他解决方法。希望它能对你有所帮助。

祝好， Sam