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>
