我创建了这个页面和脚本来使用 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:
http://jsfiddle.net/Ca5r2/ http://jsfiddle.net/Ca5r2/
