我正在尝试创建一个拖放表单构建器,我遇到了一些奇怪的问题,我的基本拖动事件处理程序。
具体来说,可拖动元素的作用类似于它们具有来自放置目标的事件侦听器,但是当我检查元素时,它们只有来自拖动元素的事件侦听器。
这是继承问题吗?我能做些什么来防止可拖动物品像放下目标一样?
谢谢!
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<style>
.drag
{
border: solid;
margin: auto;
width: 80px;
}
.drop
{
border: solid;
margin: auto;
min-height: 100px;
width: 100px;
}
.over
{
border: 2px dashed #000;
}
.palette
{
position: absolute;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<script src="test.js"></script>
<div id="palette" class="palette">
<div id="1" draggable="true" class="drag">Test 1</div>
<div id="2" draggable="true" class="drag">Test 2</div>
<div id="3" draggable="true" class="drag">Test 3</div>
<div id="4" draggable="true" class="drag">Test 4</div>
<div id="5" draggable="true" class="drag">Test 5</div>
</div>
<div id="target" class="drop">
</div>
</body>
</html>
使用Javascript:
window.onload = initall;
function initall()
{
var allDivs = document.getElementsByTagName('DIV');
for (var i = 0; i < allDivs.length; i++)
{
if(allDivs[i].className == "drag")
{
allDivs[i].addEventListener('dragstart', handleDragStart);
allDivs[i].addEventListener('dragend', handleDragEnd);
}
if(allDivs[i].className == "drop")
{
allDivs[i].addEventListener('dragenter', handleDragEnter,true);
allDivs[i].addEventListener('dragover', handleDragOver,true);
allDivs[i].addEventListener('dragleave', handleDragLeave,true);
allDivs[i].addEventListener('drop', handleDrop,true);
}
}
}
/*
* Functions for element being dragged
*/
function handleDragEnd(ev)
{
ev.target.style.opacity = '1';
}
function handleDragStart(ev)
{
ev.target.style.opacity = '0.4';
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData("text", ev.target.id);
}
/*
* Functions for drop target
*/
function handleDragEnter(ev)
{
ev.target.classList.add('over');
}
function handleDragLeave(ev)
{
ev.target.classList.remove('over');
}
function handleDragOver(ev)
{
if (ev.preventDefault) {
ev.preventDefault();
}
ev.dataTransfer.dropEffect = "move";
}
function handleDrop(ev)
{
if (ev.preventDefault) {
ev.preventDefault();
}
if(ev.target.className.indexOf("drop") > -1)
{
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
ev.target.classList.remove('over');
}
return false;
}
答案 0 :(得分:0)
尝试使用false而不是true作为附加到drop div的addeventlisteners中的第三个参数。