Hata: "Düğüm" üzerinde "appendChild" yürütülemedi: parametre 1 "Düğüm" türünde değil

130

Bir div üzerine bir görüntüyü sürükleyip bırakmaya çalışıyorum. Görüntü div üzerine sürüklenmiyor ve aşağıdaki hatayı veriyor

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.draganddrop.html:20 dropdraganddrop.html:26 ondrop

kod

  <!DOCTYPE HTML>
  <html>
     <head>
        <meta charset="utf-8">
        <title>Creativity Dashboard</title>

        <!-- Required CSS -->
        <link href="css/movingboxes.css" rel="stylesheet">
        <link href="css/compare.css" rel="stylesheet">

        <!--[if lt IE 9]>
           <link href="css/movingboxes-ie.css" rel="stylesheet" media="screen">
        <![endif]-->

        <!-- Required script -->
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        <script src="js/jquery.movingboxes.js"></script>

        <!-- Demo only -->
        <link href="demo/demo.css" rel="stylesheet">
        <script src="demo/demo.js"></script>

        <script>
           function allowDrop(ev) {
              ev.preventDefault();
           }

           function drag(ev) {
              ev.dataTransfer.setData("text", ev.target.id);
           }

           function drop(ev) {
              ev.preventDefault();
              var data = ev.dataTransfer.getData("text");
              ev.target.appendChild(document.getElementById(data));
           }
        </script>
        <style>
           /* Overall & panel width defined using css in MovingBoxes version 2.2.2+ */
           #slider-one {
              width: 1003px;
           }

           #slider-one>li {
              width: 150px;
           }
        </style>
     </head>

     <body>
        <div class="wrapper">
           <!-- Slider #1 -->
           <ul id="slider-one">

              <li><img id="drag1" src="demo/1.jpg" draggable="true"
                 ondragstart="drag(event)" alt="picture"></li>

              <li><img id="drag2" src="demo/2.jpg" draggable="true"
                 ondragstart="drag(event)" alt="picture"></li>

              <li><img id="drag3" src="demo/3.jpg" draggable="true"
                 ondragstart="drag(event)" alt="picture"></li>

              <li><img id="drag5" src="demo/4.jpg" draggable="true"
                 ondragstart="drag(event)" alt="picture"></li>

              <li><img id="drag6" src="demo/5.jpg" draggable="true"
                 ondragstart="drag(event)" alt="picture"></li>

              <li><img id="drag7" src="demo/6.jpg" draggable="true"
                 ondragstart="drag(event)" alt="picture" id="astronaut"></li>

              <li><img id="drag8" src="demo/7.jpg" draggable="true"
                 ondragstart="drag(event)" alt="picture"></li>

           </ul>
           <!-- end Slider #1 -->
           <div id="dragAnddrop" ondrop="drop(event)"
              ondragover="allowDrop(event)" style="width: 12em; height: 12em">
           </div>
        </div>

        <div>
           <div class="left">
              <img id="drag" draggable="true" ondragstart="drag(event)"
                 src="images/startingImage.jpg" style="width: 12em;" alt="picture">

           </div>
           <div class="middle ">
              <img id="image3" src="images/startingImage.jpg" class="image-size"
                 alt="picture" draggable="true" ondragstart="drag(event)"> <img
                 src="images/harvest.jpg" class="image-size" alt="picture">
           </div>
           <div class="right">
              <img src="images/startingImage.jpg" style="width: 12em;"
                 alt="picture">
           </div>
        </div>
     </body>
  </html>

javascript html

— MindBrain
kaynak

5

document.getElementByIdbüyük olasılıkla boş dönüyor, değerini kontrol edindata

— SmokeyPHP

1

Sen kullanmak ev.target.appendChild(document.getElementById(data));ancak hiçbir öğenin kimliği ile varsa datao zaman document.getElementByIddönecektir null. Yani ev.target.appendChild(null)atacak.

— Oriol

Yakalanmamış TypeError: undefined bir functioncompare.html değildir yazıyor: 92 ondragstart

— MindBrain

201

Aslında basit bir cevap.

İşleviniz divdüğüm yerine bir dize döndürüyor . appendChildyalnızca bir düğüm ekleyebilir.

Örneğin, dizeyi eklemeye çalışırsanız:

var z = '<p>test satu dua tiga</p>'; // is a string 
document.body.appendChild(z);

Yukarıdaki kod asla çalışmayacaktır. Ne işe yarayacak:

var z = document.createElement('p'); // is a node
z.innerHTML = 'test satu dua tiga';
document.body.appendChild(z);

— Faris Rayhan
kaynak

@nmnsud, yukarıda ve günümüzde hemen hemen her projede yer almaktadır.

— Lodewijk

Kötü soru, ancak ekledikten sonra yeni oluşturulan öğeyi kaldırmamız gerekiyor mu? Bunu bir döngünün olacağı ve tuvaletin içinde ek çocuk seçenekleri olacağı bazı durumlarda soruyorum. Herhangi bir bellek sorunu veya dom içinde oluşturulan daha fazla çöp öğesi olacak mı?

— Kurkula

Bu durumda fazladan bir <p> etiketi alacaksınız.

— Kurkula

13

Bu, kimliği atanmış bir öğeyi yanlışlıkla sürüklemiyorsanız (örneğin, çevreleyen öğeyi sürüklüyorsanız) meydana gelebilir. Bu durumda kimlik boştur ve drag () işlevi boş bir değer atar ve bu değer daha sonra drop () öğesine iletilir ve orada başarısız olur.

Kimlikleri tds, div'ler veya sürüklenebilir öğenizin etrafındaki her şey dahil olmak üzere tüm öğelerinize atamayı deneyin.

— kubante
kaynak

5

Benim durumumda, aradığım herhangi bir dize yoktu appendChild, appendChildargümandan aktardığım nesne yanlıştı, bir diziydi ve bir element nesnesi geçirdim, bu yüzden divel.appendChild(childel[0])yerine kullandım divel.appendChild(childel)ve çalıştı. Umarım birine yardımcı olur.

— Santosh Kumar
kaynak

0

ondragstart(event)yerine kullanondrag(event)

— Nawab Ali
kaynak

0

Ayrıca kullanabilirsiniz element.insertAdjacentHTML('beforeend', data);

Lütfen MDN'deki "Güvenlik konuları" bölümünü okuyun .

— Matthew
kaynak