拖放功能不能正常工作

我創建一個頁面中，我有一個fav_div中，我想刪除從sourcePopup一些按鈕，這是酥料餅，但無法刪除。拖放功能不能正常工作

這裏是例外，這我是個越來越。

Uncaught TypeError: Cannot read property 'cloneNode' of null

這是我的代碼。

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

來源

2016-09-12 Sandip Armal Patil

拖放功能不能正常工作

回答

相關問題