ドラッグアンドドロップで消えるディビジョン

Question

私はJSで単純なドラッグアンドドロップ操作を行っています。私はコンテナを生成する必要があります。なぜなら、事前にどれだけ多くのものが必要なのかわからないからです。それはいくつかの問題につながっているようです。

最後のdivにアイテムをドラッグすると、divが消えるということです。私はそれが何を引き起こしているのか分かりませんが、それは奇妙です。

第二は、ドロップセクション

box.addEventListener('drop', function(e) { 
     e.preventDefault(); 
     var data = e.dataTransfer.getData('id'); 
     e.target.appendChild(document.getElementById(data)); 
    }); 

に、私は、エラーメッセージを取得していますということです：「：、パラメータ1は 『ノード』タイプではない 『ノード』 on 『には、appendChild』を実行に失敗しました」と「データ」は渡されていません。私はJSFiddleでこのメッセージを受け取るだけです：FirefoxとChromeの両方で正常に動作しますが、それはより大きな問題の一部であると思われます。

私はこれで非常に新しいので、どんな助けもありがとうございます。

JSFiddle here.

Answer 1

私はこれがあなたのために働くだろうと思います。

私はJavaScriptをいくつか変更しました。どこにでも、私は変更を加え

var productList = []; 

    for (var w = 0; w < 2; w++) { 
     productList.push('Apples', 'Plums', 'Rice', 'Potatoes', 'Chicken', 'Pork'); 
    } 

    productList.sort(); 
    console.log(productList.length); 


var boxContainer = document.createDocumentFragment(); 



for (var i = 0; i < 3; i++) { 
    var box = boxContainer.appendChild(document.createElement("div")); 
    var boxID = "box" + i; 

     box.setAttribute('id', boxID); 
     box.setAttribute('class', 'dropTarget'); 

     box.addEventListener('dragend', function(e) { 
      elementDragged = null; 
     }); 

     box.addEventListener('dragover', function(e) { 
      if (e.preventDefault) { 
       e.preventDefault(); 
      }; 
     //This close was right below your Remove Class. Preventing the over class from being added 
     }); 
     box.addEventListener('dragenter', function(e) { 

     if(this.className.indexOf('over') < 0) 
     //Append the className, don't remove it. 
      this.className += " over"; 
     }); 

     box.addEventListener('dragleave', function(e) { 
     //Now we remove it. 
      this.className = this.className.replace(' over',''); 

      e.dataTransfer.dropEffect = 'move' 
      return false; 
     }); 

     box.addEventListener('drop', function(e) { 
      e.preventDefault(); 
      var data = e.dataTransfer.getData('id'); 
     //Just preventing the HierarchyRequestError. 
     var parent= e.dataTransfer.getData('parent'); 
     if(parent == e.target.id) return; 
     target=e.target; 
     //Prevent it from dragging into another div box and force it to go into the box. 
     if(e.target.id.indexOf('box') < 0) target=e.target.parentNode; 

      target.appendChild(document.getElementById(data)); 
     }); 

document.drag = function(target, e) { 

    e.dataTransfer.setData("Text", 'id'); 
    //This is the drag function that's being called. It needed the reference to the ID. 
    e.dataTransfer.setData('id', target.id); 
    //Add parentID, so we can check it later. 
    e.dataTransfer.setData('parent',target.parentNode.id) 
}  

document.getElementById("placeholder").appendChild(box); 
}; 



for (var a = 0; a < productList.length; a++){ 
     renderProductList(productList[a], a); 

    }; 

function renderProductList(element, index) { 
    console.log(element); 
     var nameDiv = document.createElement('div'); 
     var itemName = element; 

     nameDiv.setAttribute('class','dragger'); 
     nameDiv.setAttribute('id', itemName + index); 
     nameDiv.setAttribute('name', itemName); 
     nameDiv.setAttribute('draggable', "true"); 
     nameDiv.setAttribute('ondragstart', 'drag(this, event)'); 

     nameDiv.style.backgroundColor = pastelColors(); 

     var aBox = document.getElementById('box0'); 
     aBox.appendChild(nameDiv); 

     var t = document.createTextNode(element); 
     console.log("T: " + t); 

     nameDiv.innerHTML = nameDiv.innerHTML + element; 

}; 

function pastelColors(){ 
    var r = (Math.round(Math.random()* 127) + 127).toString(16); 
    var g = (Math.round(Math.random()* 127) + 127).toString(16); 
    var b = (Math.round(Math.random()* 127) + 127).toString(16); 
    pColor = '#' + r + g + b; 
    console.log(pColor); 
    return pColor; 
}; 

    function drag(target, e) { 

    e.dataTransfer.setData('id', target.id); 
    }; 

私がコメントを作った

https://jsfiddle.net/3yLk11eb/5/

：

はこちらをご覧ください。そして、この作業をスムーズに行うために多くの変更がありました。