如何修复拖放JavaScript [英] How to fix drag and drop JavaScript
问题描述
我创建了此页面和脚本，以使用JavaScript，HTML，CSS拖放对象.我关注对象跟随鼠标悬停在页面项上并将其拖放到容器上，但是我的问题是拖放无法正常工作?
I created this page and script to drag and drop an object using JavaScript, HTML, CSS. I spotlight object follow mouse to hover over the page item and drop it on the container but my problem is the drag and drop is not working?
这是代码:
<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;
}
提琴:
推荐答案
好，我发现了一些可以使jsFiddle工作的方法.
Ok, a couple of things I found to get the jsFiddle working.
首先，元素不可拖动的原因与伪元素#spotlight:after有关.它以-25px的上，左，下和右值绝对"定位.我不认为您在做您想做的事.具有这些位置的元素将占据整个屏幕，因为它将从左边框左侧的25px延伸到右边缘之后的25px，依此类推.临时解决方案是添加css属性
First, the reason the elements aren't draggable has to do with your pseudo element #spotlight:after. It is positioned 'absolute' with top, left, bottom, and right values of -25px. I don't think is doing what you intended. An element with those positions is going to take up the entire screen because it will stretch from 25px to the left of the left border to 25px after the right edge and so on. A temporary solution is to add the css attribute
pointer-events: none;
第二，你有</p>
Secondly, you have
<body onload="initPage()">
和
function initPage() {
通常这没问题，但是在JSFiddle中，javascript窗口的作用域位于页面onload处理程序内部，因此函数在本地作用域.为了使它们进入全局范围，您可以做几件事，但是暂时我更改了要显式添加到窗口范围的功能:
Normally this would be fine, but in JSFiddle the javascript window is scoped inside of the page onload handler and so the functions are scoped locally. To get them into the global scope you can do several things, but temporarily I changed the function to be explicitly added to the window scope:
window['initPage'] = function() {
此外，因为我们已经在onload处理程序中进行作用域设置，所以我删除了
Also, because we are already scoped inside of the onload handler I removed the
window.onload = function() {
作用域，包括尾括号.
这是工作中的 JSFiddle
这篇关于如何修复拖放JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
