Ad

Disappearing Divs In Drag And Drop

- 1 answer

I am working on a simple drag and drop operation in JS. I have to generate the containers, since I do not know in advance how many I will need, and that seems to be leading to a couple of problems.

The first is that if I drag an item over the last div, the div disappears. I have no idea what is causing it, but it is odd.

The second is that in the drop section

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

I am getting the error message: "Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'," and the 'data' is not being passed. I only get this message on JSFiddle: in both Firefox and Chrome it works fine, but I suspect that it is part of a larger issue.

I am very new at this, so any help would be appreciated.

JSFiddle here.

Ad

Answer

I think this will work for you.

I've made some changes to your javascript.

Please have a look here:

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

I've made comments everywhere I made changes. And there were a lot of changes to make this work smoothly.

Ad
source: stackoverflow.com
Ad