拖放功能不起作用

Question

I am creating one page in which I have one fav_div in which I want to drop some button from sourcePopup which is popover but unable to drop.

Here is Exception which I ma getting.

 Uncaught TypeError: Cannot read property 'cloneNode' of null 

Here is my code.

<script>        
function drag(e) {
  e.dataTransfer.setData("Text", e.target.id);
}

function allowDrop(e) {
  e.preventDefault();
}

function drop(e) {
  e.preventDefault();
  var el = document.getElementById(e.dataTransfer.getData('Text'));     
  var y = el.cloneNode(true);

var links = document.getElementById("fav_div").querySelectorAll('button');
var isAvailable = false;
for (var i = 0; i < links.length; i++) {    
    console.log("fav_id:- "+links[i].id + " y.id :- " +y.id);   
    if(links[i].id == y.id){
        alert(y.id+' already present');
        isAvailable = true;
    }else{
        isAvailable = false;    
    }
}

if(!isAvailable){       
    e.target.appendChild(y);    
    document.getElementById(y.id).className = "";
    document.getElementById(y.id).className = "btn-primary-custom";
}

}   

</script>
<div id="sourcePopover" class="container hide">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 remove-grid-padding margin-2px" >
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 padding-2px" >
        <button class="btn btn-secondary  btn-popup-sources" id="source_btn_one" draggable="true" ondragstart="drag(event)" onclick="buttonPressed(this.id)">
            <img src="images/one.png" class="img-responsive popup-source-image" style="padding:5px" > <br/>
            <span class="popup-source-text"> one </span>
        </button>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 padding-2px" >
        <button class="btn btn-secondary btn-popup-sources center-block" id="source_btn_two" draggable="true" ondragstart="drag(event)" onclick="buttonPressed(this.id)">
            <img src="images/two.png" class="img-responsive popup-source-image" > <br/>
            <span class="popup-source-text"> two </span>
        </button>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 padding-2px" >
        <button class="btn btn-secondary  btn-popup-sources center-block" id="source_btn_three" draggable="true" ondragstart="drag(event)" onclick="buttonPressed(this.id)"> 
            <img src="images/three.png" style="padding:5px" class="img-responsive popup-source-image" > <br/>
                <span class="popup-source-text"> three  </span> 
        </button>
    </div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 remove-grid-padding margin-2px" >
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 padding-2px" >
        <button class="btn btn-secondary  btn-popup-sources center-block" id="source_btn_four" draggable="true" ondragstart="drag(event)" onclick="buttonPressed(this.id)">
            <img src="images/four.png" class="img-responsive popup-source-image" > <br/>
            <span class="popup-source-text"> four </span>
        </button>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 padding-2px" >
        <button class="btn btn-secondary  btn-popup-sources center-block" id="source_btn_five" draggable="true" ondragstart="drag(event)" onclick="buttonPressed(this.id)">
            <img src="images/five.png" class="img-responsive popup-source-image"> <br/>
            <span class="popup-source-text"> five </span>
        </button>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 padding-2px" >
        <button class="btn btn-secondary btn-popup-sources center-block" id="source_btn_six" draggable="true" ondragstart="drag(event)" onclick="buttonPressed(this.id)">
            <img src="images/six.png" class="img-responsive popup-source-image" >  <br/>
            <span class="popup-source-text"> six </span> 
        </button>
    </div>
</div>  

<div class="btn-group-vertical center-block" id="fav_div" ondragover="allowDrop(event)" ondrop="drop(event)">                            
<a data-toggle="popover" data-trigger="focus" >
    <button type="button" class="btn btn-secondary btn-primary-custom btn-primary-custom-text"
        id="btn_select_source" >Select
    </button>                                       
</a>                            
<a data-toggle="tab" href="#eleven" >
    <button type="button" class="btn btn-secondary btn-primary-custom" id="btn_eleven" onclick="buttonPressed(this.id)">
        <img src="images/eleven.png" class="img-responsive" >                                           
    </button>
</a>                               
<a data-toggle="tab" href="#thirteen" >
    <button type="button" class="btn btn-secondary btn-primary-custom " id="btn_thirteen" onclick="buttonPressed(this.id)">
        thirteen
    </button>
</a>                                
<a data-toggle="nine" href="#nine">
    <button type="button" class="btn btn-secondary btn-primary-custom" id="btn_nine" onclick="buttonPressed(this.id)">
        nine
    </button>
</a>                               
<a data-toggle="tab" href="#ten" >
    <button type="button" class="btn btn-secondary btn-primary-custom" id="btn_ten" onclick="buttonPressed(this.id)">
        <img src="images/ten.png" class="img-responsive center-block" >   <div class="circle"></div>   
    </button>
</a>                    

Answer 1

The first problem that pops up for me is, that you closed the <head> to early.
The second error is, that you closed the </article> but hadn't opened an <article> field.