所以我想创建一个简单的拖放界面，并弄清楚了dropzone和draggable组件。我的dropzone是带有class='dropzone'的div。它接受我的class='item'的div项目。在dropzone元素内，我有3个输入框，一旦用户将“ n”个元素拖到每个dropzone中，用户便会填写它们。每个拖放区中的可拖动对象数量没有限制。

index.html

    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-4">
                <h5 class="target-header">Draggable Targets</h5>
                <h6 class="subtitle-2">If weights are skewed,aggregate targets by dragging them into a single dropzone
                    and assigning them a new numeric/text label and target weight. To add a new dropzone,click the
                    <b>"Add New Dropzone"</b> button.</h6>
                <div id='targets'>
                    <div class='item' draggable="true">Education Var #1</div>
                    <div class='item' draggable="true">Education Var #2</div>
                    <div class='item' draggable="true">Education Var #3</div>
                    <div class='item' draggable="true">Education Var #4</div>
                    <div class='item' draggable="true">Education Var #5</div>
                    <div class='item' draggable="true">Education Var #6</div>
                    <button id="submit-dropzone" class="btn btn-primary">Add New Dropzone</button>
                </div>
            </div>
            <div class="col-lg-8">
                <h5 class="target-header">Dropzones</h5>
                <h6 class="subtitle-2">Each dropzone must be unique. To ensure uniqueness,each dropzone must contain a unique text-label
                    (i.e. "Primary Education"),numeric-survey label (i.e. "1"),and weight (32.13%). When inputting
                    weights,please omit the "%" sign. Even if a dropzone contains only <b>one</b> target,please ensure
                    that target is dropped into its own <b>individual dropzone</b>; if not,that target will not be recorded.</h6>
                <div class="scroll" id='drop-container'>
                    <div class="dropzone" style="border-color: rgba(0,0.125)">
                        <div class="row float-right">
                            <input class="mx-sm-1 mb-5 float-right" type="label" class="form-control" id="survey-label" placeholder="Enter numeric label">
                            <input class="mx-sm-4 mb-5" type="label" class="form-control" id="text-label" placeholder="Enter text-based label">
                            <input class="mx-sm-4 mb-5" type="label" class="form-control" id="text-label" placeholder="Enter weight">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

现在，当我将可拖动对象移动到放置区中时，可拖动对象将按我的预期卡入到位，但是一旦发生这种情况，放置区中的3个输入框将被覆盖并消失。之所以感到困惑，是因为在handleDrop函数下，我希望将可拖动对象作为子对象（“ appendChild”）附加到我的目标对象中。如果我尝试拖动另一个可拖动对象，则会发生同样的事情。第二个可拖动对象将覆盖dropzone中的所有内容。我已经调试了几个小时，似乎找不到问题！我是Java语言的新手，我一直在想办法解决问题，因此将不胜感激！

draggable.js

    function handleDragStart(e) {
        // this.style.opacity = '0.4'
        dragSrcEl = this;

        //for some reason,using "text/html" removes the additional
        //div text placed on top of the moved "div" item
        e.dataTransfer.setData('text/html',this.innerText);

    }

    function handleDragEnter(e) {
      // this / e.target is the current hover target.
      this.classList.add('over');
    }

    function handleDragOver(e) {
        if (e.preventDefault) {
                e.preventDefault(); // Necessary. Allows us to drop.
            }
                return false;
        }


    function handleDragLeave(e) {
        this.classList.remove('over');  // this / e.target is previous target element.
    }

    function handleDrop(e) {
        if (e.stopPropagation) {
            e.stopPropagation();
        }
        if (dragSrcEl != this){
            this.innerText = e.dataTransfer.getData('text');
            debugger;
            e.target.appendChild(dragSrcEl)
        }
        return false;
        }

    function handleDragEnd(e) {
        [].forEach.call(cols,function (col) {
            col.classList.remove('over');
        });
    }

// Allows us to append items to multiple dropdowns as they are created
// If the listeners are outside this statement,the DOM will only identify
// what is on the page during it's initial load.

  $(document).on("click","#submit-dropzone",function(){

    var drops = document.querySelectorAll(".dropzone");

     [].forEach.call(drops,function(drop) {
     drop.addEventListener('dragenter',handleDragEnter,false);
     drop.addEventListener('dragover',handleDragOver,false);
     drop.addEventListener('dragleave',handleDragLeave,false);
     drop.addEventListener('drop',handleDrop,false);

  })
  })

  var cols = document.querySelectorAll(".item");
  [].forEach.call(cols,function(col) {
    col.addEventListener('dragstart',handleDragStart,false);
    col.addEventListener('dragend',handleDragEnd,false)
  })