0
A
回答
0
对不起,这不是越早回答。我相信你必须手动检查元素上,下,左,右边缘的位置,所以这里是我做过什么:
//Call this function from within your .on('dragmove') method.
//It should replace your translations.
function noOverlap(event, overlapElements){
//just for flagging when the target would overlap another element
var overlap = false;
var targetDims = event.target.getBoundingClientRect();
for(i = 0; i < overlapElements.length; i++){
var overlapElementDims =
overlapElements[i].getBoundingClientRect();
//make sure the element doesn't look at itself..
if(overlapElements[i] != event.target){
//checks if the target "doesn't" overlap
if(((targetDims.right + dx) < (overlapElementDims.left + 1))
||((targetDims.left + 1 + dx) > (overlapElementDims.right))
||((targetDims.top + 1 + dy) > (overlapElementDims.bottom))
||((targetDims.bottom + dy) < (overlapElementDims.top + 1))}{
//Basically, the target element doesn't overlap the current
//element in the HTMLCollection, do nothing and go to the
//next iterate
}
else{
//This is if the target element would overlap the current element
//set overlap to true and break out of the for loop to conserve time.
overlap = true;
break;
}
}
};
if(overlap === false){
//if there's no overlap, do your normal stuff, like:
event.target.x += dx;
event.target.y += dy;
event.target.style.webkitTransform =
event.target.style.transform =
'translate(' + event.target.x + 'px, ' + event.target.y + 'px)';
//then reset dx and dy
dy = 0;
dx = 0;
}
else{
if(event.interaction.pointers[event.interaction.pointers.length - 1].type
=== "pointerup"){
//check if the target "is" in the restriction zone
var restriction =
interact(event.target).options.drag.restrict.restriction;
var restrictionDims = restriction.getBoundingClientRect();
if((targetDims.right > restrictionDims.right) ||
(targetDims.left < restrictionDims.left) ||
(targetDims.bottom > restrictionDims.bottom) ||
(targetDims.top < restrictionDims.top)){
event.target.style.webkitTransform =
event.target.style.transform =
'translate(0px, 0px)';
//then reset dx and dy
dy = 0;
dx = 0;
//then reset x and y
event.target.x = 0;
event.target.y = 0;
}
}
}
}
相关问题
- 1. 拖动interact.JS
- 2. 如何将可拖动元素限制为特定元素
- 3. 如何防止html中可拖动元素的重叠
- 4. 限制jQuery可拖动项目重叠/与同级元素碰撞
- 5. interact.js拖动项目移动在顶部
- 6. Raphael-拖放时检测重叠元素
- 7. 如何控制重叠元素android活动的绘制顺序?
- 8. 将拖放区域限制为一些可拖动的元素
- 9. 如何获得元素的ID,而我拖动“拖动”元素
- 10. 如何防止带拖曳功能的ap元素重叠?
- 11. 如何限制可拖拽列表中元素的数量?
- 12. 在jquery中拖动元素
- 13. 如何在qml中拖动时复制元素的实例?
- 14. 如何在jQuery UI中获取拖动元素的子元素
- 15. 滚动视图中的重叠元素
- 16. 使用interact.js拖放功能
- 17. interact.js拖/放引用格
- 18. 重叠元素中的目标元素
- 19. 如何在另一个元素上重叠一个元素
- 20. HTML元素重叠
- 21. 重叠CSS元素
- 22. HTML元素重叠
- 23. 重叠HTML元素
- 24. Div重叠元素
- 25. 如何制作可拖动叠加层的Google地图/在Android中拖动它?
- 26. 限制在UI元素中
- 27. 同位素元素重叠
- 28. 在css:hover中拖动变换后的Interact.js不再工作
- 29. 限制容器内的可拖动元素
- 30. HTML&jQuery - 需要重叠重叠元素
另外,如果有人结束了读这篇文章,请让我知道什么我所能做的就是提高效率。 – KirklandBrown373
我已经停止通过更新拖动元素的位置拖动,但任何想法如何我可以停止在这种情况下移动鼠标指针? – not2savvy
停止移动鼠标指针是与js交互的完全不同的主题。我会看看这样的:http://www.smartjava.org/content/html5-use-pointer-lock-api-restrict-mouse-movement-element – KirklandBrown373