我一直在做一个需要使用HTML5拖放功能的项目,目前遇到了一些困难,这个问题可能很容易解决,但我似乎找不到解决方法。
基本上,我有一些可拖动元素和一些放置区域。由于用一个工作示例来解释总是更容易,所以我制作了这个简单的JSFIDDLE。
现在,您可以将任何元素拖放到任何放置区域中或将其移出,但我想实现的是使橙色框只能在绿色区域中放置(忽略蓝色区域...如果您将其放置在那里,请将其移回原始位置),而红色框只能放置在蓝色区域中(忽略绿色区域)。
是否有人能帮助我或提示我如何解决这个问题?
基本上,我有一些可拖动元素和一些放置区域。由于用一个工作示例来解释总是更容易,所以我制作了这个简单的JSFIDDLE。
现在,您可以将任何元素拖放到任何放置区域中或将其移出,但我想实现的是使橙色框只能在绿色区域中放置(忽略蓝色区域...如果您将其放置在那里,请将其移回原始位置),而红色框只能放置在蓝色区域中(忽略绿色区域)。
是否有人能帮助我或提示我如何解决这个问题?
function DragOver(ev) {
ev.preventDefault();
}
function Drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function Drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
var elemens = document.querySelectorAll('.draggable');
[].forEach.call(elemens, function(elem) {
elem.addEventListener('dragover', DragOver, false);
elem.addEventListener('drop', Drop, false);
});
#divContenedor {
width: 950px;
height: 500px;
}
#div1,
#div2,
#div3 {
width: 350px;
height: 70px;
border: 1px solid #aaaaaa;
background-color: green;
}
#div4 {
width: 350px;
height: 70px;
border: 1px solid #aaaaaa;
background-color: blue;
}
<p>
Drag&drop testing</p>
<div id="divContenedor" class="draggable" style="background-color: yellow; width: 100%; float: left; position: relative;">
<div id="drag1" draggable="true" ondragstart="Drag(event)" style="width: 336px; height: 69px; background-color: orange; cursor: move;">1</div>
<div id="drag2" draggable="true" ondragstart="Drag(event)" style="width: 336px; height: 69px; background-color: orange; cursor: move;">2</div>
<div id="drag3" draggable="true" ondragstart="Drag(event)" style="width: 336px; height: 69px; background-color: red; cursor: move;">3</div>
</div>
<div style="position: absolute; top: 100px; left: 500px;">
<div id="div1" class="draggable" ></div>
<br />
<div id="div2" class="draggable" ></div>
<br />
<div id="div3" class="draggable" ></div>
<br />
<div id="div4" class="draggable" ></div>
</div>
使用@Amen的解决方案更新JSFIDDLE。