防止在可拖动元素内拖动子元素

doo*_*ist 4 html

我有一个我希望能够拖动的元素,但其中有一些我不希望能够拖动的元素。我希望有一个简单的答案,不需要(很多)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>
Run Code Online (Sandbox Code Playgroud)

http://plnkr.co/edit/Xto7lPO32TRVScewJkS9

有任何想法吗?

Sam*_*ner 5

不知道这个问题是否仍然相关,但我找到了一种方法来解决您的问题,如下所示:

  <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>
Run Code Online (Sandbox Code Playgroud)

看起来有点老套,但它确实有效。我还没有找到任何其他方法来解决这个问题。希望对您有帮助。

干杯萨姆