将放置区域限制为某些可拖动元素
Restrict drop areas to some draggable elements
我一直在做一个需要HTML5
拖动的项目;我陷入了一个很容易实现的问题,但我似乎找不到解决方案。
基本上,我有一些可拖动的元素和一些下降区域。由于用一个工作示例来解释总是更容易,我已经使这个简单的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。
您可以使用data
属性逻辑,并进行以下3个简单的修改来实现
1) 向draggable
元素添加属性data-appendto="green"
或blue
2) 添加到div
元素中,可拖动元素应附加data-boxtype="red"
或blue
3) 在Drop(ev)
函数中,您可以检查document.getElementById(data)
和ev.target
数据属性值是否匹配,然后允许删除。使用js .getAttribute('data-attribute')
函数可以获得元素data-attribute
if(ev.target.getAttribute('data-boxtype') ==
document.getElementById(data).getAttribute('data-appendto')){
ev.target.appendChild(document.getElementById(data));
}
回答Armen不错,但如果您想处理对dragov事件的访问,请添加另一个简单地表示"是"的属性。
正如您所看到的,我的JavaScript模块对象中有4个方法,它们都是从拖放元素事件中调用的。
步骤1。对于与其drop元素查询匹配的所有潜在目标,OnDragStart事件通过将data ts allowdrop属性更改为"Yes"(默认值为no)来设置阶段。假设一个元素将接受一个以上的源,我执行一个包含查询来查找该元素,而不是一个完全匹配的
步骤2。当在接收元素上拖动时,其DragOver事件将检查其"data ts allowdrop"属性,以查看其是否设置为true或"Yes"。如果是这样,那么它将运行preventsDefault,并且由OnDrop方法允许和处理丢弃,该方法将关闭"data ts allowdrop"属性。
步骤3。还可以使用onEnd将"data ts allowdrop"设置为No,以防取消拖动事件。
<div id="divName" draggable="true" ondragstart="tsjDragnDrop.setSource(event);" data-ts-drag-allow-source="admin" tabindex="1" ><span >Item to Drag</span><img alt="an icon" src="~/images/anImage.png" /></div>
<li ondragover="tsjDragnDrop.allowTarget(event);" ondragleave="tsjDragnDrop.onLeave(event)" ondrop="tsjDragnDrop.onDrop(event)" data-ts-drag-allow-target="admin" data-ts-allowdrop="No" >Drop Target in a list item</li>
var DraggnApi = {
allowTarget: function (event) {
var source = $(event.currentTarget).attr("data-ts-allowdrop");
$(event.currentTarget).addClass("ts-dragover");
if (source === "Yes") {
event.preventDefault();
}
},
onLeave: function (event) {
$(event.currentTarget).removeClass("ts-dragover");
},
onDrop: function (event) {
event.preventDefault();
var source = $(event.currentTarget).removeClass("ts-dragover");
$(event.currentTarget).attr("data-ts-allowdrop", "No");
},
onEnd: function (event) {
$(event.currentTarget).attr("data-ts-allowdrop", "No");
},
setSource: function(e)
{
e.dataTransfer.setData("text", "SomeText");
var source = $(event.currentTarget).attr("data-ts-drag-allow-source");
if ($("li[data-ts-drag-allow-target]").attr("data-ts-drag-allow-target").indexOf(source) > -1) {
$("li[data-ts-drag-allow-target*='" + source + "']").attr("data-ts-allowdrop", "Yes");
}
}
}
- 如何使元素在可拖动元素内可单击
- 拖动开始时更改可拖动元素的大小
- 无法为HTML5中具有画布和图像的可拖动元素设置“拖动图像”
- 具有可拖动元素的HTML到PDF
- 可缩放容器鼠标上的可拖动元素在创建时从辅助对象上浮动
- 删除所有可拖动元素后如何显示消息
- 将可拖动元素与从父项位置开始的网格对齐
- 拖动元素时,如何获取要替换的元素的位置
- 将id为X的可拖动元素拖放到id为Y的容器
- 在没有jQuery的情况下拖动元素
- 可拖动元素在悬停在另一个'It’s draggable
- 拖动时更改HTML5可拖动元素的“克隆”文本
- Javascript:当元素中有<选择>时,可拖动元素搞砸了
- 是否有可能知道 jquery 可拖动元素将恢复到哪里
- 如何将键控事件与 JQuery-ui 可拖动元素一起使用
- jQuery UI 可拖动元素位于其他可拖动元素下
- 从拖动元素中获取 HTML5 自定义数据属性
- 使用 D3.js 拖动元素时滚动
- 同步两个可拖动元素的位置
- 如何从可拖动元素中删除项目符号