Question

我正在JS中进行简单的拖放操作。我必须生成容器，因为我事先并不知道我需要多少容器，这似乎导致了一些问题。

首先，如果我将项目拖到最后一个div上，则div会消失。我不知道是什么导致它，但它很奇怪。

第二个是放置部分

import pprint
pprint.pformat(thedict)

我收到错误消息：“无法在'Node'上执行'appendChild'：参数1不是'Node'类型，”并且没有传递'data'。我只在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/

我随处可见，我做了更改。并且有很多变化可以使这项工作顺利进行。

在拖放中消失Div

1 个答案: