HTMLドラッグアンドドロップAPIを使用すると、ドラッグ可能が機能しませんでした

debugcn 投稿 Dev

コガレウン

これは私のコードです：

var dragged

    document.addEventListener("drag", function (event) {
    }, false)

    document.addEventListener("dragstart", function (event) {
      dragged = event.target
      event.target.style.opacity = .5
    }, false)

    document.addEventListener("dragend", function (event) {
      event.target.style.opacity = ""
    }, false)

    document.addEventListener("dragover", function (event) {
      event.preventDefault()
    }, false)

    document.addEventListener("dragenter", function (event) {
      if (event.target.className == "dropzone") {
        event.target.style.background = "purple"
      }

    }, false)

    document.addEventListener("dragleave", function (event) {
      if (event.target.className == "dropzone") {
        event.target.style.background = ""
      }

    }, false)

    document.addEventListener("drop", function (event) {
      event.preventDefault()
      if (event.target.className == "dropzone") {
        event.target.style.background = ""
        dragged.parentNode.removeChild(dragged)
        event.target.appendChild(dragged)
      }

    }, false)

   #draggable {
      width: 200px;
      height: 20px;
      text-align: center;
      background: white;
    }

    .dropzone {
      width: 200px;
      height: 20px;
      background: blueviolet;
      margin-bottom: 10px;
      padding: 10px;
    }

  <div class="dropzone ">
    <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
      this is draggable
    </div>
  </div>
  <div class="dropzone"></div>
  <div class="dropzone"></div>
  <div class="dropzone"></div>

テキストを他のdivコンテナに入れたい。テキストを他のdivにドラッグします

テキストを他のdivにドラッグします

しかし、私はdivコンテナをドラッグできることがわかりました。ちょうどこのように

エラー

draggable = 'false'に設定しましたが、divコンテナをドラッグできます。

<div class="dropzone " draggable="false">
<div id="draggable" draggable="true"ondragstart="event.dataTransfer.setData('text/plain',null)">
    this is draggable
</div>
</div><div class="dropzone" draggable="false">
</div><div class="dropzone" draggable="false">
</div><div class="dropzone" draggable="false"></div>

Chromeを使用していますが、コンソールにエラーが表示されません。

ニミット・シャー

あなたは、不足しているuser-select: none;中で.dropzoneクラス。問題は、最初に.dropzoneをドラッグしたときに、.dropzoneとドラッグ可能なテキストを選択していたことでした。user-select: none;onを使用すると.dropzone、dropzonedivは選択されません。

試してみる。

var dragged

    document.addEventListener("drag", function (event) {
    }, false)

    document.addEventListener("dragstart", function (event) {
      dragged = event.target
      event.target.style.opacity = .5
    }, false)

    document.addEventListener("dragend", function (event) {
      event.target.style.opacity = ""
    }, false)

    document.addEventListener("dragover", function (event) {
      event.preventDefault()
    }, false)

    document.addEventListener("dragenter", function (event) {
      if (event.target.className == "dropzone") {
        event.target.style.background = "purple"
      }

    }, false)

    document.addEventListener("dragleave", function (event) {
      if (event.target.className == "dropzone") {
        event.target.style.background = ""
      }

    }, false)

    document.addEventListener("drop", function (event) {
      event.preventDefault()
      if (event.target.className == "dropzone") {
        event.target.style.background = ""
        dragged.parentNode.removeChild(dragged)
        event.target.appendChild(dragged)
      }

    }, false)

#draggable {
      width: 200px;
      height: 20px;
      text-align: center;
      background: white;
    }

    .dropzone {
      width: 200px;
      height: 20px;
      background: blueviolet;
      margin-bottom: 10px;
      padding: 10px;
      user-select: none;
    }

<div class="dropzone ">
    <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
      this is draggable
    </div>
  </div>
  <div class="dropzone"></div>
  <div class="dropzone"></div>
  <div class="dropzone"></div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]