gpt4 book ai didi

javascript - 拖放功能不起作用

转载 作者:行者123 更新时间:2023-11-28 05:12:59 24 4
gpt4 key购买 nike

我正在创建一个页面,其中有一个 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>

最佳答案

我遇到的第一个问题是,您关闭了 <head>早点。
第二个错误是,您关闭了 </article>但没有打开<article>字段。

关于javascript - 拖放功能不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39449581/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com