我创建了此页面和脚本来使用 JavaScript、HTML、CSS 拖放对象。我聚焦对象跟随鼠标将鼠标悬停在页面元素上并将其放在容器上，但我的问题是拖放不起作用？
代码如下:
HTML:
<body onload="initPage()">
<div class="container">
<span id="spotLight"></span>
<h1>Drag and Drop Demos</h1>
<h2>Page Elements</h2>
<p>
Drag the elements on the right into the drop area.
</p>
<div id="dd-elements" class="clearfix">
<ul id="drag-elements">
<li draggable="true">Element One</li>
<li draggable="true">Element Two</li>
<li draggable="true">Element Three</li>
<li draggable="true">Element Four</li>
<li draggable="true">Element Five</li>
</ul>
<div id="drop-target-one">
Drop Here!
</div>
</div>
</div>
</body>
CSS:
.container {
max-width: 960px;
margin: 0 auto;
padding: 1em;
}
#drop-target-one,
#dd-files,
#dd-images {
border: 5px dashed #D9D9D9;
border-radius: 10px;
padding: 5em 2em;
text-align: center;
}
.over {
background: #F7F7F7;
}
#drag-elements {
list-style: none;
padding: 0;
margin: 0 0 1em;
}
#drag-elements li {
display: inline-block;
padding: 0.5em 1em;
margin: 0 1em 1em 0;
border: 1px solid #D9D9D9;
background: #F7F7F7;
border-radius: 3px;
}
//spotLight
#spotLight {
position: absolute;
left: 50px;
top: 50px;
width: 200px;
height: 200px;
border-radius: 20px;
box-shadow: 0px 0px 0px 300px rgba(255, 255, 255, 0.5);
}
#spotLight:after {
content: '';
position: absolute;
left: -25px;
top: -25px;
right: -25px;
bottom: -25px;
border: solid 1px gray;
border-radius: 25px;
box-shadow: 0px 0px 0px 300px rgba(255, 255, 255, 0.6);
}
.clearfix {
*zoom: 1; }
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: ""; }
.clearfix:after {
clear: both; }
JavaScript:
window.onload = function() {
var dropZoneOne = document.querySelector('#drop-target-one');
var dragElements = document.querySelectorAll('#drag-elements li');
var elementDragged = null;
for (var i = 0; i < dragElements.length; i++) {
dragElements[i].addEventListener('dragstart', function(e) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text', this.innerHTML);
elementDragged = this;
});
dragElements[i].addEventListener('dragend', function(e) {
elementDragged = null;
});
};
dropZoneOne.addEventListener('dragover', function(e) {
if (e.preventDefault) {
e.preventDefault();
}
e.dataTransfer.dropEffect = 'move';
return false;
});
dropZoneOne.addEventListener('dragenter', function(e) {
this.className = "over";
});
// Event Listener for when the dragged element leaves the drop zone.
dropZoneOne.addEventListener('dragleave', function(e) {
this.className = "";
});
dropZoneOne.addEventListener('drop', function(e) {
if (e.preventDefault) e.preventDefault();
if (e.stopPropagation) e.stopPropagation();
this.className = "";
this.innerHTML = "Dropped " + e.dataTransfer.getData('text');
document.querySelector('#drag-elements').removeChild(elementDragged);
elementDragged = null;
return false;
});
};
function initPage() {
document.onmousemove = followMe;
}
function followMe(evt) {
var evt = (evt) ? evt : ((window.event) ? event : null);
var object = document.getElementById('spotLight');
object.style.left = evt.clientX - (object.offsetWidth/2) + 'px';
object.style.top = evt.clientY - (object.offsetHeight/2) + 'px';
return;
}
fiddle :
最佳答案
好的，我发现了一些可以让 jsFiddle 正常工作的东西。
首先，元素不可拖动的原因与伪元素#spotlight:after 有关。它被定位为“绝对”，上、左、下、右值为 -25px。我认为没有按照您的意愿行事。具有这些位置的元素将占据整个屏幕，因为它将从左边框左侧的 25 像素拉伸(stretch)到右边缘之后的 25 像素，依此类推。临时解决办法是添加css属性
pointer-events: none;
其次，你有
<body onload="initPage()">
和
function initPage() {
通常这没问题，但在 JSFiddle 中，javascript 窗口的作用域位于页面 onload 处理程序内部，因此函数的作用域位于本地。要让它们进入全局作用域，您可以执行以下操作，但我暂时更改了要显式添加到窗口作用域的函数:
window['initPage'] = function() {
另外，因为我们已经在 onload 处理程序内部，所以我删除了
window.onload = function() {
范围，包括端大括号。
这是工作 JSFiddle
关于javascript - 如何修复拖放 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24985601/